/* ══════════════════════════════════════════════════════════════════════
   CUTTLIST — SOCLE « AURORA »
   Fond sombre + dégradés électriques, cartes denses à rayons courts
   (4–8 px, l'échelle relevée sur les vraies marketplaces), titres en
   Barlow Condensed, halo coloré au survol plutôt qu'une ombre grise.

   PERF, les règles qu'on s'est données :
   · le fond est peint UNE fois en radial-gradients — pas d'orbe animé
   · backdrop-filter réservé à la nav, aux panneaux et aux overlays posés
     sur un visuel. Jamais sur les cartes d'un feed : ce serait N repaints.
   ══════════════════════════════════════════════════════════════════════ */

:root,[data-theme="dark"]{
  --page:#050510; --ink:#ECEDF7; --muted:#9AA0C4; --faint:#6B7196;
  --glass:rgba(255,255,255,.05); --glass-2:rgba(255,255,255,.08); --glass-3:rgba(255,255,255,.035);
  --edge:rgba(255,255,255,.10); --edge-2:rgba(255,255,255,.055);
  --shadow:0 1px 1px rgba(0,0,0,.5),0 10px 28px -16px rgba(0,0,0,.9);
  --acc:#7C5CFF; --acc-2:#22D3EE; --acc-soft:rgba(124,92,255,.17); --on-acc:#fff;
  --ok:#3DDC97; --ok-soft:rgba(61,220,151,.13);
  --prem:#F5B44C; --prem-soft:rgba(245,180,76,.13);
  --bad:#FF6B7A; --bad-soft:rgba(255,107,122,.13);
  --grain:.09;
  /* l'aurora : trois foyers de couleur, peints une fois */
  --a1:rgba(124,92,255,.42); --a2:rgba(34,211,238,.28); --a3:rgba(236,72,153,.20);
  --v1:linear-gradient(158deg,rgba(124,92,255,.16),rgba(0,0,0,.34));
  --v2:linear-gradient(158deg,rgba(34,211,238,.14),rgba(0,0,0,.34));
  --v3:linear-gradient(158deg,rgba(236,72,153,.13),rgba(0,0,0,.34));
  --v4:linear-gradient(158deg,rgba(61,220,151,.12),rgba(0,0,0,.34));
  --stage:linear-gradient(158deg,rgba(124,92,255,.18),rgba(0,0,0,.4));
}
[data-theme="light"]{
  --page:#F4F5FB; --ink:#14162A; --muted:#5C6285; --faint:#8B90AE;
  --glass:rgba(255,255,255,.72); --glass-2:rgba(255,255,255,.9); --glass-3:rgba(255,255,255,.55);
  --edge:rgba(20,22,42,.09); --edge-2:rgba(20,22,42,.07);
  --shadow:0 1px 2px rgba(30,32,60,.05),0 10px 26px -14px rgba(30,32,60,.28);
  --acc:#6B46F5; --acc-2:#0891B2; --acc-soft:rgba(107,70,245,.10); --on-acc:#fff;
  --ok:#0F9D6B; --ok-soft:rgba(15,157,107,.10);
  --prem:#B77410; --prem-soft:rgba(183,116,16,.10);
  --bad:#D93B4C; --bad-soft:rgba(217,59,76,.09);
  --grain:.035;
  --a1:rgba(124,92,255,.16); --a2:rgba(34,211,238,.13); --a3:rgba(236,72,153,.09);
  --v1:linear-gradient(158deg,#E9E6FF,#DAD5F7); --v2:linear-gradient(158deg,#DDF3F8,#CBE8F0);
  --v3:linear-gradient(158deg,#FBE7F1,#F2D8E6); --v4:linear-gradient(158deg,#DEF5EB,#CDEBDD);
  --stage:linear-gradient(158deg,#E9E6FF,#D6D0F5);
}

/* Largeur de cadre du site. La nav s'aligne dessus : deux valeurs séparées
   finissent toujours par diverger. 1180 tient 3 colonnes de cartes
   confortables sans étaler le contenu sur un écran large. */
:root{--cadre:1180px}

*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--page);color:var(--ink);font-family:Barlow,system-ui,sans-serif;font-size:15px;
  -webkit-font-smoothing:antialiased;min-height:100vh;transition:background .35s,color .35s}
h1,h2,h3,h4,h5,.disp{font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.005em;
  line-height:1.06}
.mono{font-family:'Space Mono',monospace}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
.wrap{max-width:var(--cadre);margin:0 auto;padding:0 24px}
.wrap--narrow{max-width:1080px}
.wrap--form{max-width:840px}

/* ── FOND ── */
.bg{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(52vw 52vw at 8% -10%,var(--a1),transparent 62%),
    radial-gradient(46vw 46vw at 100% 22%,var(--a2),transparent 60%),
    radial-gradient(50vw 50vw at 46% 108%,var(--a3),transparent 62%)}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}

/* ── VERRE (grandes surfaces seulement) ── */
.g{background:var(--glass);
  border:1px solid var(--edge);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.08)}
/* Le flou ne sert que là où le fond a des détails à brouiller : la nav qui
   passe au-dessus du contenu, les overlays, les pastilles posées sur un
   visuel. Ailleurs il floute un dégradé lisse — invisible, et payé à chaque
   frame. Réservé aux surfaces qui le méritent, via .g--blur. */
.g--blur{backdrop-filter:blur(20px) saturate(1.7);
  -webkit-backdrop-filter:blur(20px) saturate(1.7)}
[data-theme="light"] .g{box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.9)}
.g--flat{background:var(--glass);backdrop-filter:none;-webkit-backdrop-filter:none;
  border:1px solid var(--edge-2)}

/* ── NAV ── */
.nav{position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--page) 84%,transparent);
  backdrop-filter:blur(18px) saturate(1.5);border-bottom:1px solid var(--edge-2)}
/* Bandeau pleine largeur : la marque va au bord gauche, le compte au bord
   droit, pendant que le contenu reste dans le cadre de 1180. */
.nav__in{max-width:none;margin:0;padding:0 32px;height:58px;display:flex;align-items:center;gap:16px}
@media(max-width:640px){.nav__in{padding:0 16px}}

/* ── BOÎTE À OUTILS ──
   Partagee par la page publique /outils.html et l'onglet du compte. */
.fam{margin:0 0 34px}
.fam__hd{margin:0 0 14px}
.fam__hd h2{margin:0 0 3px;font-size:1.12rem;font-weight:600;letter-spacing:-.025em}
.fam__hd p{margin:0;font-size:.84rem;color:var(--faint)}

.outils{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:12px}
.outil{display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:start;
  padding:14px 15px;border:1px solid var(--edge-2);border-radius:9px;background:var(--glass-3);
  cursor:pointer;transition:.16s;text-align:left;font:inherit;color:inherit;width:100%}
.outil[aria-pressed="true"]{border-color:var(--acc);background:var(--glass-2)}
.outil .ico{width:38px;height:38px;border-radius:8px;display:grid;place-items:center;
  background:var(--stage);color:var(--muted);flex:none}
.outil[aria-pressed="true"] .ico{background:var(--acc);color:#fff}
.outil .ico svg{width:22px;height:22px}
.outil b{display:block;font-size:.95rem;font-weight:600;letter-spacing:-.02em;margin-bottom:3px}
.outil p{margin:0;font-size:.82rem;line-height:1.5;color:var(--muted)}
.outil .niv{font-family:'Space Mono';font-size:.68rem;color:var(--faint);white-space:nowrap;
  padding-top:3px}
.outil .coche{width:19px;height:19px;border-radius:5px;border:1.5px solid var(--edge);
  display:grid;place-items:center;flex:none;margin-top:2px}
.outil[aria-pressed="true"] .coche{background:var(--acc);border-color:var(--acc);color:#fff}
.outil .coche svg{width:13px;height:13px;opacity:0}
.outil[aria-pressed="true"] .coche svg{opacity:1}

/* encart de la boîte à outils dans l'espace du compte */
.boite__mot{margin:0 0 16px;font-size:.9rem;line-height:1.65;color:var(--muted);max-width:62ch}
.boite__mot a{color:var(--acc)}
.boite__bar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;padding:13px 16px;margin:0 0 26px;border-radius:8px;
  border:1px solid var(--edge-2);background:var(--glass-3);font-size:.88rem;color:var(--muted)}
.boite__bar b{color:var(--acc);font-family:'Space Mono';font-size:1.1rem}

/* ── PIED DE PAGE ── */
.sfoot{margin-top:70px;border-top:1px solid var(--edge-2);
  background:color-mix(in srgb,var(--page) 88%,#000)}
.sfoot__in{display:grid;grid-template-columns:minmax(240px,1.6fr) repeat(3,1fr);
  gap:34px;padding:44px 32px 34px}
.sfoot__marque .brand{font-size:1.3rem;display:inline-block;margin-bottom:10px}
.sfoot__marque p{margin:0;font-size:.84rem;line-height:1.65;color:var(--faint);max-width:34ch}
.sfoot nav{display:flex;flex-direction:column;gap:9px}
.sfoot h4{margin:0 0 4px;font-family:'Space Mono',monospace;font-size:.7rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:400}
.sfoot nav a{font-size:.87rem;color:var(--muted);transition:.15s}
.sfoot nav a:hover{color:var(--acc)}
.sfoot__bas{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:16px 32px;border-top:1px solid var(--edge-2);
  font-size:.78rem;color:var(--faint);font-family:'Space Mono',monospace}
.sfoot__bas a{color:var(--faint)}
.sfoot__bas a:hover{color:var(--acc)}
@media(max-width:900px){
  .sfoot__in{grid-template-columns:1fr 1fr;gap:26px;padding:34px 20px 26px}
  .sfoot__marque{grid-column:1/-1}
  .sfoot__bas{padding:16px 20px}
}
/* la barre du bas mobile recouvrirait le pied */
@media(max-width:760px){.sfoot{margin-bottom:64px}}
.brand{font-family:'Barlow Condensed';font-weight:700;font-size:1.46rem;text-transform:uppercase;flex:none}
.brand span{background:linear-gradient(100deg,var(--acc),var(--acc-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.search{flex:1;max-width:430px;position:relative}
.search input{width:100%;height:36px;border-radius:5px;border:1px solid var(--edge-2);
  background:color-mix(in srgb,var(--page) 60%,transparent);padding:0 12px 0 36px;font-size:.87rem;
  outline:0;transition:.18s}
.search input::placeholder{color:var(--faint)}
.search input:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.search .ic{position:absolute;left:12px;top:10px;width:16px;height:16px;color:var(--faint)}
.nav__links{display:flex;gap:2px;font-size:.87rem;font-weight:500}
.nav__links a{padding:7px 12px;border-radius:5px;color:var(--muted);transition:.15s}
.nav__links a:hover{color:var(--ink);background:var(--glass-2)}
.nav__links a.on{color:var(--ink);background:var(--glass-2)}
.nav__right{margin-left:auto;display:flex;align-items:center;gap:8px}
.icon-btn{width:34px;height:34px;border-radius:5px;background:var(--glass-3);
  border:1px solid var(--edge-2);display:grid;place-items:center;position:relative;transition:.16s;flex:none}
.icon-btn:hover{background:var(--glass-2);border-color:var(--edge)}
.icon-btn .ic{width:17px;height:17px}
.dot{position:absolute;top:7px;right:8px;width:6px;height:6px;border-radius:50%;
  background:var(--acc-2);box-shadow:0 0 8px var(--acc-2)}
[data-theme="dark"] .i-moon{display:none}[data-theme="light"] .i-sun{display:none}
@media(max-width:900px){.nav__links,.nav .search{display:none}}

/* ── BOUTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-weight:600;
  padding:9px 15px;border-radius:5px;font-size:.86rem;transition:.18s;white-space:nowrap;
  border:1px solid transparent;color:var(--on-acc);
  background:linear-gradient(150deg,var(--acc-2),var(--acc));
  box-shadow:0 6px 20px -8px var(--acc)}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 10px 26px -8px var(--acc)}
.btn:disabled{opacity:.45;pointer-events:none}
.btn--glass{background:var(--glass-3);border-color:var(--edge);color:var(--ink);box-shadow:none}
.btn--glass:hover{background:var(--glass-2);filter:none;transform:none;box-shadow:none}
.btn--ghost{background:none;border-color:transparent;color:var(--muted);box-shadow:none}
.btn--ghost:hover{color:var(--ink);background:var(--glass-3);filter:none;transform:none}
.btn--sm{padding:7px 12px;font-size:.8rem}
.btn--big{padding:13px 20px;width:100%;font-family:'Barlow Condensed';font-weight:700;
  font-size:1.08rem;text-transform:uppercase;letter-spacing:.02em}
.btn--full{width:100%}
.btn .ic{width:16px;height:16px}

/* ── AVATARS ── */
.av{border-radius:5px;display:grid;place-items:center;font-weight:700;color:#fff;flex:none;
  font-family:Barlow;width:34px;height:34px;font-size:.76rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.av--sm{width:22px;height:22px;font-size:.6rem;border-radius:4px}
.av--md{width:30px;height:30px;font-size:.7rem}
.av--lg{width:64px;height:64px;font-size:1.4rem;border-radius:8px}

/* ── CHIPS & BADGES ── */
.chip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:5px;
  background:transparent;border:1px solid transparent;font-size:.84rem;font-weight:500;
  white-space:nowrap;transition:.15s;color:var(--muted)}
.chip:hover{color:var(--ink);background:var(--glass-2)}
.chip.on{background:var(--ink);color:var(--page);font-weight:600}
.chip--key{color:var(--acc-2);border-color:color-mix(in srgb,var(--acc-2) 34%,transparent);
  background:var(--acc-soft);font-weight:600}
.chip--key:hover{background:color-mix(in srgb,var(--acc) 24%,transparent);color:var(--ink)}
.chip .ic{width:15px;height:15px}
.bdg{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:4px;font-size:.72rem;
  font-weight:700;font-family:'Space Mono';border:1px solid var(--edge-2);background:var(--glass-3)}
.bdg .ic{width:12px;height:12px;stroke-width:2.2}
.bdg--ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 34%,transparent);background:var(--ok-soft)}
.bdg--prem{color:var(--prem);border-color:color-mix(in srgb,var(--prem) 34%,transparent);background:var(--prem-soft)}
.bdg--bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 34%,transparent);background:var(--bad-soft)}
/* posés SUR un visuel : là, le verre se justifie */
.bdg--on{color:#fff;background:rgba(6,6,20,.64);
  border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.bdg--on.bdg--ok{color:#C9F7E3;background:rgba(8,40,28,.55);border-color:rgba(61,220,151,.3)}
.bdg--on.bdg--prem{color:#FFE9C2;background:rgba(52,36,8,.55);border-color:rgba(245,180,76,.3)}

/* ── MODE CATALOGUE SEUL (J1) ──
   Le site est en lecture : on n'affiche pas des commandes que le serveur
   refusera. Ces éléments sont créés par le JS après le montage de la page,
   d'où la règle CSS plutôt qu'un retrait au montage. */
[data-shop="closed"] :is(#postBtn,#qa .qa:last-child){display:none}

/* Réservé aux lecteurs d'écran : un intitulé que l'œil n'a pas besoin de
   lire (le pictogramme suffit) mais que la voix doit prononcer. */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* ── CASE À COCHER ──
   Vivait dans explorer.html ; la page d'accueil s'en sert aussi depuis que la
   barre a son panneau de filtres. */
.chk{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:5px;cursor:pointer;
  font-size:.86rem;color:var(--muted);position:relative;transition:.14s}
.chk:hover{background:var(--glass-3);color:var(--ink)}
.chk input{position:absolute;opacity:0;pointer-events:none}
.chk .bx{width:18px;height:18px;border-radius:4px;border:1.5px solid var(--edge-2);flex:none;
  display:grid;place-items:center;transition:.14s}
.chk .bx .ic{width:12px;height:12px;color:#fff;opacity:0;stroke-width:3}
.chk input:checked+.bx{background:linear-gradient(150deg,var(--acc-2),var(--acc));border-color:transparent}
.chk input:checked+.bx .ic{opacity:1}
.chk input:checked~span{color:var(--ink);font-weight:500}
.chk input:focus-visible+.bx{box-shadow:0 0 0 3px var(--acc-soft);border-color:var(--acc)}
.chk .n{margin-left:auto;font-family:'Space Mono';font-size:.72rem;color:var(--faint)}

/* ── CARTES ── */
/* La carte est un <a> : il lui faut display:block, et le texte garde sa
   couleur au lieu de virer au bleu de lien. */
.card{display:block;color:inherit;text-decoration:none;
  break-inside:avoid;margin-bottom:18px;border-radius:6px;overflow:hidden;position:relative;
  cursor:pointer;background:var(--glass);border:1px solid var(--edge-2);
  transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease}
/* ── SURVOL DES CARTES ──
   Une seule regle pour toutes les cartes du site : feed, realisations, forum,
   bibliotheque, atelier, fiche plan, boite a outils.

   Regle a ne pas enfreindre : PEINTURE UNIQUEMENT.
   Plusieurs de ces listes sont des conteneurs `columns`. Un `transform` (ou un
   `filter`) sur un enfant d'un conteneur multi-colonnes en fait un bloc
   conteneur, ce qui entre en conflit avec la fragmentation en colonnes :
   WebKit peint alors la carte dans la mauvaise colonne, la rogne, ou ne la
   peint pas du tout. C'etait la cause des cartes qui disparaissaient.
   Un changement de `padding` au survol est proscrit pour la meme raison de
   confort : il fait sauter la mise en page sous le curseur.

   Autorise au survol : border-color, background, color, box-shadow.
   Interdit : transform, scale, filter, padding, will-change:transform.

   Les classes ci-dessous sont definies dans le <style> de chaque page, qui
   passe APRES app.css : aucune page ne doit redeclarer un `:hover` de carte,
   il ecraserait celui-ci. */
.card,.mk,.make,.dir,.tp,.cat,.lib,.ref,.thumb,.outil{
  transition:border-color .16s ease,background-color .16s ease,
             box-shadow .16s ease,color .16s ease}
.card:hover,.mk:hover,.make:hover,.dir:hover,.tp:hover,.cat:hover,.lib:hover,.ref:hover,.thumb:hover,.outil:hover{
  border-color:color-mix(in srgb,var(--acc) 45%,transparent);
  background:var(--glass-2);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 14%,transparent)}
.card:hover h3,.mk:hover h3,.tp:hover h3,
.lib:hover .txt b,.ref:hover b,.make:hover .ft b,.cat:hover b{color:var(--acc-2)}
/* un outil déjà coché garde son liseré plein : le survol ne doit pas
   l'affaiblir, on lirait ça comme un décochage. */
.outil[aria-pressed="true"]:hover{border-color:var(--acc)}
/* le voile pose sur le visuel s'eclaircit — c'est de la peinture, pas de la
   geometrie : le visuel semble s'animer sans qu'aucune couche ne bouge. */
.card .viz::after{transition:opacity .22s ease}
.card:hover .viz::after{opacity:.45}
.viz{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--v1)}
.viz>:is(svg,img){width:100%;height:100%;display:block}
/* un rendu garde ses marges (le fond coloré fait partie du dessin) ;
   une photo déposée par l'auteur remplit le cadre. */
.lien-outils{display:inline-block;margin-top:9px;font-size:.8rem;color:var(--acc);text-decoration:none}
.lien-outils:hover{text-decoration:underline}
.cv{object-fit:contain}
.cv--photo{object-fit:cover}
/* Cadre vide : aucun plan n'a de photo, ou le serveur sert sans visuels.
   Rien n'est téléchargé — c'est un bloc, pas une image de remplacement. */
.cv--vide{width:100%;display:grid;place-items:center;background:var(--stage)}
.cv--vide svg{width:30px;height:30px;color:var(--faint);opacity:.42}
.viz::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.2) 0%,transparent 28%,transparent 62%,rgba(0,0,0,.28) 100%)}
.badges{position:absolute;top:8px;left:8px;display:flex;flex-wrap:wrap;gap:5px;
  max-width:calc(100% - 86px);z-index:2}
.price{position:absolute;top:8px;right:8px;padding:4px 9px;border-radius:4px;font-weight:700;
  font-size:.85rem;z-index:2;color:#fff;background:rgba(6,6,20,.64);
  border:1px solid rgba(255,255,255,.16)}
.price--free{color:#B9FFE0;border-color:rgba(61,220,151,.36)}
.ovl{position:absolute;left:8px;right:8px;bottom:8px;z-index:2;display:flex;gap:5px;flex-wrap:wrap}
.spec{font-family:'Space Mono';font-size:.68rem;padding:4px 8px;border-radius:4px;color:#fff;
  background:rgba(6,6,20,.58);border:1px solid rgba(255,255,255,.13)}
.body{padding:12px 14px 13px;position:relative;z-index:1}
.card h3{font-family:Barlow;font-size:1rem;font-weight:600;line-height:1.24;margin-bottom:7px;
  letter-spacing:-.005em}
.by{display:flex;align-items:center;gap:7px;font-size:.79rem;color:var(--muted);margin-bottom:10px}
.by b{color:var(--ink);font-weight:600}
.stats{display:flex;gap:12px;font-family:'Space Mono';font-size:.72rem;color:var(--faint);
  border-top:1px solid var(--edge-2);padding-top:9px}
.stats span{display:inline-flex;align-items:center;gap:5px}
.stats b{color:var(--ink);font-weight:700}
.stats .ic{width:14px;height:14px;opacity:.8}
.stats .hot b{color:var(--acc-2)}
.dotsBtn{margin-left:auto;opacity:.55}

/* ── PANNEAUX & SECTIONS ── */
.panel{border-radius:8px;padding:16px}
.panel h4{font-family:'Barlow Condensed';font-size:1.04rem;text-transform:uppercase;margin-bottom:13px;
  display:inline-flex;align-items:center;gap:8px;width:100%}
.panel h4 .ic{width:16px;height:16px;color:var(--acc-2)}
section{margin-top:32px}
.sec-h{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.sec-h h2{font-size:1.42rem;text-transform:uppercase;display:inline-flex;align-items:center;gap:9px}
.sec-h .n{width:25px;height:25px;border-radius:5px;background:linear-gradient(150deg,var(--acc-2),var(--acc));
  color:#fff;display:grid;place-items:center;font-family:'Space Mono';font-size:.72rem;font-weight:700;
  flex:none;box-shadow:0 4px 12px -5px var(--acc)}
.sec-h .r{margin-left:auto;font-size:.82rem;color:var(--faint);display:inline-flex;align-items:center;gap:9px}
.box{border-radius:8px;overflow:hidden}
.row{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--edge-2)}
.row:first-of-type{border-top:0;padding-top:0}
.row b{font-size:.85rem;font-weight:600;display:block}
.row em{font-style:normal;font-size:.74rem;color:var(--faint);font-family:'Space Mono'}
.row .btn{margin-left:auto}
.kv{display:flex;justify-content:space-between;padding:6px 0;font-family:'Space Mono';font-size:.79rem;
  color:var(--muted)}
.kv b{color:var(--ink)} .kv b.acc{color:var(--acc-2)}

/* ── EN-TÊTE DE PAGE ── */
.phead{padding:32px 0 18px}
.phead h1{font-size:clamp(1.9rem,4vw,3rem);text-transform:uppercase;margin-bottom:12px}
.phead p{font-size:1rem;color:var(--muted);max-width:60ch;line-height:1.55}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'Space Mono';font-size:.72rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--acc-2);font-weight:700;margin-bottom:14px}

/* ── FORMULAIRES ── */
.field{margin-bottom:17px}
.field>label{display:block;font-size:.87rem;font-weight:600;margin-bottom:7px}
.field .help{font-size:.79rem;color:var(--faint);margin-top:6px;line-height:1.45}
.inp,textarea.inp,select.inp{width:100%;border-radius:5px;border:1px solid var(--edge-2);
  background:var(--glass-3);padding:11px 13px;font-size:.92rem;outline:0;transition:.18s}
.inp::placeholder{color:var(--faint)}
.inp:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft);background:var(--glass-2)}
textarea.inp{min-height:110px;resize:vertical;line-height:1.55}
select.inp{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7196' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:36px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
@media(max-width:640px){.grid2,.grid3{grid-template-columns:1fr}}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{position:relative;cursor:pointer}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt span{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:5px;
  border:1px solid var(--edge-2);background:var(--glass-3);font-size:.86rem;transition:.16s;color:var(--muted)}
.opt span .ic{width:15px;height:15px}
.opt:hover span{border-color:var(--edge);color:var(--ink)}
.opt input:checked+span{border-color:var(--acc);background:var(--acc-soft);color:var(--acc-2);
  font-weight:600;box-shadow:0 0 0 2px var(--acc-soft)}
.switch{display:flex;border-radius:6px;padding:3px;background:var(--glass-3);
  border:1px solid var(--edge-2);width:fit-content}
.switch button{padding:8px 15px;border-radius:4px;font-size:.85rem;font-weight:600;color:var(--muted)}
.switch button.on{background:var(--glass-2);color:var(--ink)}
.drop{border:1.5px dashed var(--edge);border-radius:8px;padding:30px 20px;text-align:center;
  background:var(--glass-3);transition:.2s;cursor:pointer}
.drop:hover,.drop.over{border-color:var(--acc);background:var(--acc-soft)}
.drop .ic{width:28px;height:28px;color:var(--acc-2);margin:0 auto 11px}
.drop b{display:block;font-size:.96rem;font-weight:600;margin-bottom:5px}
.drop em{font-style:normal;font-size:.83rem;color:var(--muted)}
.cvprev{display:block;width:100%;max-height:190px;object-fit:cover;border-radius:6px;margin-bottom:12px}

/* ── TABLES ── */
table{width:100%;border-collapse:collapse;font-size:.86rem}
th{text-align:left;font-family:'Space Mono';font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);font-weight:400;padding:11px 14px;border-bottom:1px solid var(--edge-2);
  background:var(--glass-3)}
td{padding:10px 14px;border-bottom:1px solid var(--edge-2)}
tr:last-child td{border-bottom:0}
td.m,th.m{font-family:'Space Mono'}
td.rep{font-family:'Space Mono';font-weight:700;color:var(--acc-2);width:36px}
tbody tr:hover{background:var(--glass-3)}
.tot{font-family:'Space Mono';font-size:.81rem;padding:12px 14px;background:var(--glass-3);display:flex;
  gap:20px;flex-wrap:wrap;border-top:1px solid var(--edge-2)}
.tot b{color:var(--ink)} .tot span{color:var(--muted)}

/* ── VERROUILLAGE DU CONTENU PAYANT ── */
.gated{position:relative}
.gated__veil{filter:blur(5px);opacity:.4;pointer-events:none;user-select:none}
tr.veil td:nth-child(n+4){filter:blur(5px);opacity:.5;user-select:none}
.lockp{padding:20px;border-top:1px solid var(--edge-2);
  background:linear-gradient(to bottom,transparent,var(--acc-soft));
  display:flex;align-items:center;gap:15px;flex-wrap:wrap}
.lockp .lic{width:40px;height:40px;border-radius:6px;flex:none;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--acc-2),var(--acc));box-shadow:0 6px 18px -8px var(--acc)}
.lockp .lic .ic{width:19px;height:19px;color:#fff}
.lockp .txt{min-width:0;flex:1}
.lockp b{display:block;font-family:'Barlow Condensed';font-size:1.06rem;text-transform:uppercase;margin-bottom:4px}
.lockp p{font-size:.85rem;color:var(--muted);line-height:1.5;max-width:60ch}
.lockp .btn{flex:none}
@media(max-width:620px){.lockp .btn{width:100%}}
.lockover{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;
  padding:20px;background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--page) 80%,transparent) 45%)}
.lockover .in{text-align:center;max-width:370px;padding:22px;border-radius:8px;background:color-mix(in srgb,var(--page) 92%,transparent);border:1px solid var(--edge);box-shadow:var(--shadow)}
.lockover .in .ic{width:26px;height:26px;color:var(--acc-2);margin:0 auto 11px}
.lockover .in b{display:block;font-family:'Barlow Condensed';font-size:1.1rem;text-transform:uppercase;margin-bottom:7px}
.lockover .in p{font-size:.85rem;color:var(--muted);line-height:1.5;margin-bottom:15px}
.lockbdg{display:inline-flex;align-items:center;gap:6px;font-family:'Space Mono';font-size:.68rem;
  padding:4px 8px;border-radius:4px;background:var(--acc-soft);color:var(--acc-2);font-weight:700}
.lockbdg .ic{width:12px;height:12px}

/* ── MODALS ── */
.ovlay{position:fixed;inset:0;z-index:100;background:rgba(4,4,14,.7);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;padding:20px;overflow-y:auto}
.ovlay.on{display:flex}
.modal{width:100%;max-width:450px;border-radius:10px;padding:24px;position:relative;
  background:var(--glass-2);backdrop-filter:blur(28px) saturate(1.7);
  -webkit-backdrop-filter:blur(28px) saturate(1.7);border:1px solid var(--edge);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.14);
  animation:pop .28s cubic-bezier(.2,.9,.3,1)}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.modal--wide{max-width:610px}
.modal h3{font-size:1.35rem;text-transform:uppercase;margin-bottom:8px}
.modal .lede{font-size:.89rem;color:var(--muted);line-height:1.5;margin-bottom:19px}
.modal .x{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:5px;
  display:grid;place-items:center;color:var(--muted);background:var(--glass-3)}
.modal .x:hover{color:var(--ink);background:var(--glass-2)}
.modal .x .ic{width:15px;height:15px}

/* ── TOAST ── */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(16px);z-index:200;
  padding:12px 18px;border-radius:6px;font-size:.89rem;font-weight:500;display:flex;align-items:center;
  gap:10px;background:var(--glass-2);backdrop-filter:blur(22px) saturate(1.7);border:1px solid var(--edge);
  box-shadow:0 18px 44px -18px rgba(0,0,0,.8);opacity:0;pointer-events:none;
  transition:.28s cubic-bezier(.2,.9,.3,1)}
.toast.on{opacity:1;transform:translateX(-50%)}
.toast .ic{width:16px;height:16px;color:var(--ok)}

/* ── ÉTAT VIDE ── */
.empty{text-align:center;padding:50px 22px;border-radius:8px}
.empty .ic{width:30px;height:30px;color:var(--faint);margin:0 auto 13px}
.empty h3{font-size:1.2rem;text-transform:uppercase;margin-bottom:8px}
.empty p{font-size:.89rem;color:var(--muted);max-width:46ch;margin:0 auto 17px;line-height:1.55}

/* ── BOTTOM NAV ── */
.bnav{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);z-index:70;display:none;
  border-radius:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  background:var(--glass-2);backdrop-filter:blur(22px) saturate(1.7);border:1px solid var(--edge);
  box-shadow:var(--shadow)}
.bnav div{display:flex;gap:5px;align-items:center}
.bnav a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:.63rem;color:var(--faint);
  font-weight:500;padding:6px 12px;border-radius:5px}
.bnav a.on{color:var(--acc-2);background:var(--acc-soft)}
.bnav .ic{width:20px;height:20px}
.bnav .pub{width:42px;height:42px;border-radius:6px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--acc-2),var(--acc));color:#fff;box-shadow:0 6px 18px -7px var(--acc)}
.bnav .pub .ic{width:21px;height:21px}
@media(max-width:900px){.bnav{display:block}body{padding-bottom:96px}}

/* ── UTILITAIRES ── */
.ic{width:16px;height:16px;flex:none;display:block}
.hint{text-align:center;font-size:.78rem;color:var(--faint);padding:18px;font-family:'Space Mono'}
.muted{color:var(--muted)} .faint{color:var(--faint)}
.stack{display:flex;flex-direction:column;gap:13px}
.rowx{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.spread{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mt0{margin-top:0}.mb0{margin-bottom:0}

/* ── BANDEAU DE DÉMONSTRATION (mode DEMO=1 du serveur) ── */