/* ==========================================================================
   AURORA STORE — SYSTEME DE DESIGN V7.0.0
   Feuille unique des pages publiques et de la coquille de l'espace client.
   Remplace aurora-v420.css + site-header-v510.css sur ces pages.
   Le panel d'administration reste sur aurora-v420.css + admin-v500.css.

   Regle de performance heritee de la V4.2.1 : une animation en boucle
   infinie ne touche que transform et opacity, jamais un element porteur
   d'un filter ou d'un background-clip:text.
   ========================================================================== */

/* --- 1. Polices ---------------------------------------------------------- */

@font-face{
  font-family:"Inter var";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* --- 2. Jetons ----------------------------------------------------------- */

:root{
  /* Fonds */
  --bg:#07080f;
  --bg-2:#0a0b14;
  --surface:#0e1019;
  --surface-2:#12141e;
  --surface-3:#181b27;
  --surface-hi:#1d2130;

  /* Traits */
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.12);
  --line-3:rgba(255,255,255,.2);

  /* Texte */
  --text:#f2f4f9;
  --text-2:#c8cedb;
  --muted:#9ba3b4;
  --muted-2:#6f7889;

  /* Marque Aurora */
  --brand:#8b5cf6;
  --brand-2:#6d74ff;
  --brand-3:#a78bfa;
  --brand-ink:#c9bdfb;
  --brand-soft:rgba(139,92,246,.12);
  --brand-line:rgba(139,92,246,.3);
  --brand-grad:linear-gradient(135deg,#9d5cff,#5364ff);

  /* Etats */
  --ok:#34d399;
  --ok-soft:rgba(52,211,153,.11);
  --warn:#fbbf24;
  --warn-soft:rgba(251,191,36,.11);
  --bad:#fb7185;
  --bad-soft:rgba(251,113,133,.11);
  --info:#60a5fa;
  --info-soft:rgba(96,165,250,.11);

  /* Rayons */
  --r-xs:8px;
  --r-sm:10px;
  --r:14px;
  --r-lg:20px;
  --r-xl:26px;
  --r-full:999px;

  /* Ombres */
  --sh-sm:0 1px 2px rgba(0,0,0,.4);
  --sh:0 4px 18px rgba(0,0,0,.3);
  --sh-lg:0 18px 50px rgba(0,0,0,.42);
  --sh-brand:0 10px 34px rgba(109,90,240,.28);

  /* Rythme */
  --gap:20px;
  --pad:22px;
  --max:1200px;
  --max-wide:1400px;
  --max-text:720px;
  --header-h:64px;

  /* Transitions */
  --t-fast:.14s cubic-bezier(.3,.8,.4,1);
  --t:.22s cubic-bezier(.3,.8,.4,1);
  --t-slow:.4s cubic-bezier(.3,.8,.4,1);

  --font:"Inter var",Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SFMono-Regular","JetBrains Mono",Consolas,"Liberation Mono",monospace;

  color-scheme:dark;
}

/* --- 3. Base ------------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 24px);
}

body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* Voile d'ambiance : aplat statique, aucune animation.
   Il tient lieu du degrade historique sans le cout de repeinture. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(900px 480px at 12% -8%,rgba(139,92,246,.13),transparent 62%),
    radial-gradient(760px 420px at 92% 2%,rgba(83,100,255,.09),transparent 60%),
    linear-gradient(180deg,#090a13 0%,var(--bg) 46%,#06070d 100%);
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.016) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.016) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:linear-gradient(#000,transparent 70%);
  mask-image:linear-gradient(#000,transparent 70%);
}

a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
[hidden]{display:none!important}
hr{border:0;border-top:1px solid var(--line);margin:28px 0}

::selection{background:rgba(139,92,246,.32);color:#fff}

:focus-visible{
  outline:2px solid var(--brand-3);
  outline-offset:2px;
  border-radius:6px;
}

/* Barres de defilement discretes, sans voler le scroll natif. */
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:99px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2);background-clip:content-box}

.skip-link{
  position:absolute;left:12px;top:-60px;z-index:200;
  padding:10px 16px;border-radius:var(--r-sm);
  background:var(--brand);color:#fff;font-weight:700;
  transition:top var(--t);
}
.skip-link:focus{top:12px}

/* --- 4. Typographie ------------------------------------------------------ */

h1,h2,h3,h4,h5{
  margin:0;
  font-weight:760;
  letter-spacing:-.022em;
  line-height:1.15;
  color:var(--text);
  text-wrap:balance;
}
h1{font-size:clamp(30px,3.6vw,44px);letter-spacing:-.03em;line-height:1.08}
h2{font-size:clamp(23px,2.3vw,30px);letter-spacing:-.026em}
h3{font-size:17px}
h4{font-size:15px}
p{margin:0;color:var(--muted)}
p+p{margin-top:12px}
strong,b{font-weight:680;color:var(--text)}
small{font-size:12.5px}

.display{
  font-size:clamp(34px,4.6vw,56px);
  letter-spacing:-.036em;
  line-height:1.03;
  font-weight:780;
}

.lead{font-size:16.5px;line-height:1.62;color:var(--text-2);max-width:60ch}
.tiny{font-size:12px}
.muted{color:var(--muted)}
.mono{font-family:var(--mono);font-size:.92em;letter-spacing:-.01em}
.nowrap{white-space:nowrap}

/* Le seul degrade de texte conserve : un mot, jamais un titre entier,
   jamais anime (cf. regle de perf V4.2.1). */
.accent{
  background:linear-gradient(120deg,#fff 10%,#d6ccff 52%,#8b95ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--brand-ink);
  font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.eyebrow::before{
  content:"";width:18px;height:1px;
  background:linear-gradient(90deg,var(--brand),transparent);
}

/* --- 5. Mise en page ----------------------------------------------------- */

.container{width:min(100% - 36px,var(--max));margin-inline:auto}
.container.wide{--max:var(--max-wide)}
.container.narrow{--max:860px}

.section{padding-block:clamp(48px,6vw,86px)}
.section.tight{padding-block:clamp(34px,4vw,54px)}
.section.flush-top{padding-top:0}
.section.bordered{border-top:1px solid var(--line)}

.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;margin-bottom:26px;flex-wrap:wrap;
}
.section-head h2{margin:0}
.section-head .eyebrow{margin-bottom:10px}
.section-head-copy{max-width:56ch}
.section-head-copy p{margin-top:9px}

.stack{display:grid;gap:var(--gap)}
.stack.sm{gap:10px}
.stack.lg{gap:32px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.row.end{justify-content:flex-end}
.row.between{justify-content:space-between}
.grid{display:grid;gap:var(--gap)}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid.c4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.page-head{padding-block:clamp(34px,4.4vw,58px) 8px}
.page-head .lead{margin-top:12px}

/* --- 6. Boutons ---------------------------------------------------------- */

.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:40px;padding:0 15px;
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.04);
  color:var(--text);
  font-size:14px;font-weight:620;letter-spacing:-.01em;
  white-space:nowrap;
  transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast),color var(--t-fast),box-shadow var(--t-fast);
}
.btn:hover{background:rgba(255,255,255,.075);border-color:var(--line-3)}
.btn:active{transform:translateY(1px)}

.btn.primary{
  border-color:transparent;
  background:var(--brand-grad);
  color:#fff;font-weight:660;
  box-shadow:var(--sh-brand);
}
.btn.primary:hover{
  background:linear-gradient(135deg,#a76bff,#6472ff);
  box-shadow:0 12px 38px rgba(109,90,240,.36);
}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{background:rgba(255,255,255,.06);color:var(--text)}
.btn.outline{background:transparent}
.btn.brand-soft{border-color:var(--brand-line);background:var(--brand-soft);color:var(--brand-ink)}
.btn.brand-soft:hover{background:rgba(139,92,246,.18)}
.btn.danger{border-color:rgba(251,113,133,.24);background:var(--bad-soft);color:#ffb3bf}
.btn.danger:hover{background:rgba(251,113,133,.18)}
.btn.success{border-color:rgba(52,211,153,.24);background:var(--ok-soft);color:#8ee9c5}

.btn.sm{min-height:33px;padding:0 11px;font-size:13px;border-radius:var(--r-xs)}
.btn.lg{min-height:46px;padding:0 21px;font-size:15px;border-radius:var(--r)}
.btn.full{width:100%}
.btn.icon{width:40px;padding:0}
.btn.icon.sm{width:33px}
.btn[disabled],.btn.disabled,.btn[aria-disabled="true"]{
  opacity:.42;pointer-events:none;box-shadow:none;
}
.btn svg{width:16px;height:16px;flex:none}
.btn.lg svg{width:17px;height:17px}

/* Etat de chargement : le libelle reste en place, un anneau tourne.
   transform seul, conforme a la regle de perf. */
.btn.is-loading{pointer-events:none;color:transparent}
.btn.is-loading::after{
  content:"";position:absolute;width:15px;height:15px;
  border:2px solid rgba(255,255,255,.28);border-top-color:#fff;
  border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.link{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--brand-ink);font-weight:620;font-size:14px;
  transition:color var(--t-fast),gap var(--t-fast);
}
.link:hover{color:#e2dbff;gap:9px}
.link svg{width:15px;height:15px}

/* --- 7. Champs ----------------------------------------------------------- */

.field{display:grid;gap:7px}
.field>label,.label{
  font-size:12.5px;font-weight:620;color:var(--muted);
  letter-spacing:.01em;
}
.input,input[type=text],input[type=email],input[type=search],input[type=password],input[type=number],input[type=url],textarea,select{
  width:100%;min-height:40px;padding:9px 13px;
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.028);
  color:var(--text);font-size:14px;
  transition:border-color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);
}
textarea{min-height:110px;resize:vertical;line-height:1.55}
.input::placeholder,input::placeholder,textarea::placeholder{color:var(--muted-2)}
.input:hover,input:hover,textarea:hover,select:hover{border-color:var(--line-3)}
.input:focus,input:focus,textarea:focus,select:focus{
  outline:none;
  border-color:var(--brand-line);
  background:rgba(255,255,255,.05);
  box-shadow:0 0 0 3px rgba(139,92,246,.13);
}
select{
  appearance:none;padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%239ba3b4' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:16px;
}
.hint{font-size:12.5px;color:var(--muted-2)}
.field-error{font-size:12.5px;color:var(--bad)}
.field.invalid .input,.field.invalid input{border-color:rgba(251,113,133,.45)}

/* Recherche */
.search{position:relative;display:flex;align-items:center}
.search svg.search-icon{
  position:absolute;left:12px;width:16px;height:16px;
  color:var(--muted-2);pointer-events:none;transition:color var(--t-fast);
}
.search input{padding-left:38px;padding-right:74px}
.search:focus-within svg.search-icon{color:var(--brand-3)}
.search kbd{
  position:absolute;right:11px;
  padding:3px 6px;border:1px solid var(--line-2);border-radius:6px;
  background:rgba(255,255,255,.04);
  font-family:var(--font);font-size:11px;font-weight:600;color:var(--muted-2);
  pointer-events:none;
}
/* Le raccourci et le bouton d'effacement occupent la meme place :
   des qu'un terme est saisi, le raccourci s'efface. */
.search.has-value kbd{display:none}
.search.has-value input{padding-right:40px}
.search .search-clear{
  position:absolute;right:9px;display:grid;place-items:center;
  width:24px;height:24px;border-radius:6px;color:var(--muted);
}
.search .search-clear:hover{background:rgba(255,255,255,.08);color:var(--text)}

/* Bascule / segments */
.segmented{
  display:inline-flex;padding:3px;gap:2px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:rgba(255,255,255,.025);
}
.segmented button{
  padding:6px 12px;border-radius:7px;
  font-size:13px;font-weight:600;color:var(--muted);
  transition:background var(--t-fast),color var(--t-fast);
}
.segmented button:hover{color:var(--text)}
.segmented button.active{background:rgba(255,255,255,.09);color:var(--text)}

.pill{
  padding:7px 13px;border:1px solid var(--line);border-radius:var(--r-full);
  background:rgba(255,255,255,.025);
  font-size:13px;font-weight:600;color:var(--muted);
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.pill:hover{color:var(--text);border-color:var(--line-2)}
.pill.active{
  border-color:var(--brand-line);background:var(--brand-soft);color:#ddd3ff;
}
.pill-row{display:flex;gap:8px;flex-wrap:wrap}

/* --- 8. Surfaces --------------------------------------------------------- */

.card{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--surface);
  transition:border-color var(--t),transform var(--t),background var(--t);
}
.card.pad{padding:var(--pad)}
.card.pad-lg{padding:28px}
.card.pad-sm{padding:15px}
.card.raised{box-shadow:var(--sh)}
.card.glass{background:rgba(18,20,30,.62);backdrop-filter:blur(14px)}
.card.subtle{background:rgba(255,255,255,.018)}

a.card,.card.interactive{cursor:pointer}
a.card:hover,.card.interactive:hover{
  border-color:var(--line-2);
  background:var(--surface-2);
  transform:translateY(-2px);
}

/* Trait lumineux au survol : un degrade de brillance, pas un halo.
   Il ne tourne pas en boucle, il apparait au survol seulement. */
.card.lit::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg,rgba(157,92,255,.5),transparent 42%,transparent 62%,rgba(83,100,255,.34));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity var(--t);pointer-events:none;
}
.card.lit:hover::after{opacity:1}

.panel{
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  padding:clamp(22px,3vw,34px);
}

.divider{height:1px;background:var(--line);margin-block:18px}
.vdivider{width:1px;align-self:stretch;background:var(--line)}

/* --- 9. Badges et statuts ------------------------------------------------ */

.chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border:1px solid var(--line-2);border-radius:var(--r-full);
  background:rgba(255,255,255,.04);
  font-size:11.5px;font-weight:620;letter-spacing:.005em;color:var(--text-2);
  white-space:nowrap;
}
.chip.brand{border-color:var(--brand-line);background:var(--brand-soft);color:#d5c9ff}
.chip.ok{border-color:rgba(52,211,153,.26);background:var(--ok-soft);color:#7ce3bd}
.chip.warn{border-color:rgba(251,191,36,.26);background:var(--warn-soft);color:#f6cf74}
.chip.bad{border-color:rgba(251,113,133,.26);background:var(--bad-soft);color:#ffa8b6}
.chip.info{border-color:rgba(96,165,250,.26);background:var(--info-soft);color:#93c2fb}
.chip.plain{border-color:transparent;background:rgba(255,255,255,.055);color:var(--muted)}
.chip svg{width:12px;height:12px}

.dot{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--muted-2);
}
.dot.ok{background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
.dot.warn{background:var(--warn);box-shadow:0 0 0 3px var(--warn-soft)}
.dot.bad{background:var(--bad);box-shadow:0 0 0 3px var(--bad-soft)}
.dot.info{background:var(--info);box-shadow:0 0 0 3px var(--info-soft)}

/* Pouls : un seul anneau, en transform/opacity uniquement. */
.dot.live{position:relative}
.dot.live::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:inherit;
  animation:pulse-ring 2.4s ease-out infinite;
}
@keyframes pulse-ring{
  0%{transform:scale(1);opacity:.55}
  70%,100%{transform:scale(2.6);opacity:0}
}

.status-line{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600}

/* --- 10. En-tete --------------------------------------------------------- */

.site-header{
  position:sticky;top:0;z-index:90;
  height:var(--header-h);
  border-bottom:1px solid transparent;
  transition:border-color var(--t),background var(--t);
}
.site-header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(7,8,15,.72);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  opacity:0;transition:opacity var(--t);
}
.site-header.stuck{border-bottom-color:var(--line)}
.site-header.stuck::before{opacity:1}

.header-inner{
  height:var(--header-h);
  display:flex;align-items:center;gap:14px;
}
.brand{display:flex;align-items:center;gap:10px;flex:none;border-radius:var(--r-sm)}
.brand img{width:138px}
.brand:hover{opacity:.86}

.nav-links{
  display:flex;align-items:center;gap:1px;
  margin-inline:auto;
  padding:3px;
  border:1px solid var(--line);border-radius:var(--r-full);
  background:rgba(255,255,255,.028);
}
.nav-links a{
  position:relative;
  padding:7px 13px;border-radius:var(--r-full);
  font-size:13.5px;font-weight:600;color:var(--muted);
  transition:color var(--t-fast),background var(--t-fast);
}
.nav-links a:hover{color:var(--text);background:rgba(255,255,255,.055)}
.nav-links a.active{color:var(--text);background:rgba(255,255,255,.085)}
.nav-links .nav-sep{width:1px;height:16px;background:var(--line-2);margin-inline:5px;flex:none}
.nav-status-symbol{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--ok);margin-right:6px;vertical-align:1px;
}

.header-actions{display:flex;align-items:center;gap:8px;flex:none}
.header-actions .btn{min-height:36px;font-size:13.5px}

/* Menu utilisateur */
.user-menu{position:relative}
.user-trigger{
  display:flex;align-items:center;gap:8px;
  height:36px;padding:0 9px 0 4px;
  border:1px solid var(--line-2);border-radius:var(--r-full);
  background:rgba(255,255,255,.035);
  transition:background var(--t-fast),border-color var(--t-fast);
}
.user-trigger:hover{background:rgba(255,255,255,.08);border-color:var(--line-3)}
.user-avatar{
  width:28px;height:28px;border-radius:50%;flex:none;
  display:grid;place-items:center;overflow:hidden;
  background:var(--brand-grad);
  font-size:12px;font-weight:700;color:#fff;
}
.user-avatar img{width:100%;height:100%;object-fit:cover}
.user-trigger span{font-size:13px;font-weight:620;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-trigger svg{width:14px;height:14px;color:var(--muted);transition:transform var(--t-fast)}
.user-trigger[aria-expanded="true"] svg.caret{transform:rotate(180deg)}

.user-panel{
  position:absolute;top:calc(100% + 8px);right:0;z-index:95;
  width:238px;padding:6px;
  border:1px solid var(--line-2);border-radius:var(--r);
  background:rgba(16,18,27,.97);
  backdrop-filter:blur(18px);
  box-shadow:var(--sh-lg);
  opacity:0;transform:translateY(-6px) scale(.985);
  pointer-events:none;
  transition:opacity var(--t-fast),transform var(--t-fast);
}
.user-panel.open{opacity:1;transform:none;pointer-events:auto}
.user-panel-head{padding:10px 11px 11px;border-bottom:1px solid var(--line);margin-bottom:6px}
.user-panel-head strong{display:block;font-size:13.5px}
.user-panel-head span{font-size:12px;color:var(--muted-2)}
.user-panel a,.user-panel button{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:8px 11px;border-radius:var(--r-xs);
  font-size:13.5px;font-weight:580;color:var(--text-2);text-align:left;
  transition:background var(--t-fast),color var(--t-fast);
}
.user-panel a:hover,.user-panel button:hover{background:rgba(255,255,255,.06);color:var(--text)}
.user-panel svg{width:15px;height:15px;color:var(--muted);flex:none}
.user-panel .sep{height:1px;background:var(--line);margin:6px 0}
.user-panel .danger{color:#ffa8b6}
.user-panel .danger svg{color:#ffa8b6}

/* Declencheur mobile */
/* Flex et non grid : dans une grille de hauteur fixe, les rangees
   automatiques s'etirent et les trois barres s'ecartent bien au-dela des
   4 px voulus. Les deux barres pivotees dessinaient alors un chevron au
   lieu d'une croix. */
.mobile-toggle{
  display:none;width:38px;height:36px;
  flex-direction:column;align-items:center;justify-content:center;gap:4px;
  border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:rgba(255,255,255,.035);
}
.mobile-toggle span{
  display:block;width:15px;height:1.6px;border-radius:2px;background:var(--text);
  transition:transform var(--t),opacity var(--t-fast);
}
.mobile-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
.mobile-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.mobile-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}

/* Tiroir mobile */
.mobile-drawer{
  position:fixed;inset:var(--header-h) 0 0;z-index:88;
  padding:18px;
  background:rgba(7,8,15,.97);
  backdrop-filter:blur(20px);
  overflow-y:auto;
  opacity:0;pointer-events:none;
  transform:translateY(-8px);
  transition:opacity var(--t),transform var(--t);
}
.mobile-drawer.open{opacity:1;transform:none;pointer-events:auto}
.mobile-drawer nav{display:grid;gap:2px}
.mobile-drawer nav a{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 14px;border-radius:var(--r-sm);
  font-size:15.5px;font-weight:620;color:var(--text-2);
}
.mobile-drawer nav a:hover,.mobile-drawer nav a.active{background:rgba(255,255,255,.055);color:var(--text)}
.mobile-drawer nav a svg{width:16px;height:16px;color:var(--muted-2)}
.mobile-drawer .drawer-sep{height:1px;background:var(--line);margin:12px 4px}
.mobile-drawer .drawer-actions{display:grid;gap:9px;margin-top:16px}
.mobile-drawer .drawer-actions .btn{min-height:46px}

/* --- 11. Pied de page ---------------------------------------------------- */

.site-footer{
  margin-top:clamp(50px,7vw,96px);
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.014),transparent 40%);
}
.footer-main{
  display:grid;
  grid-template-columns:minmax(230px,1.5fr) repeat(3,minmax(130px,1fr));
  gap:34px 26px;
  padding-block:46px 34px;
}
.footer-brand img{width:150px;margin-bottom:14px}
.footer-brand p{font-size:13.5px;max-width:34ch}
.footer-social{display:flex;gap:8px;margin-top:16px}
.footer-social a{
  display:grid;place-items:center;width:34px;height:34px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--muted);
  transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast);
}
.footer-social a:hover{color:var(--text);border-color:var(--line-2);background:rgba(255,255,255,.05)}
.footer-social svg{width:16px;height:16px}

.footer-col h4{
  font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:13px;
}
.footer-col a{
  display:block;padding:4px 0;
  font-size:13.5px;color:var(--muted);
  transition:color var(--t-fast);
}
.footer-col a:hover{color:var(--text)}

.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-block:18px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted-2);
}
.footer-links{display:flex;gap:18px;flex-wrap:wrap}
.footer-links a{color:var(--muted-2);transition:color var(--t-fast)}
.footer-links a:hover{color:var(--text-2)}
.footer-status{display:inline-flex;align-items:center;gap:7px}

/* --- 12. Mouvement ------------------------------------------------------- */

/* Apparition au defilement (equivalent BlurFade, sans le flou : un flou
   anime couterait une repeinture par image, cf. regle de perf). */
[data-reveal]{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s cubic-bezier(.22,.8,.3,1),transform .5s cubic-bezier(.22,.8,.3,1);
  transition-delay:var(--reveal-delay,0ms);
  will-change:opacity,transform;
}
[data-reveal].revealed{opacity:1;transform:none;will-change:auto}

/* Bandeau defilant (equivalent Marquee). Duplique le contenu en HTML. */
.marquee{
  position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{
  display:flex;align-items:center;gap:var(--marquee-gap,44px);
  width:max-content;
  animation:marquee var(--marquee-duration,38s) linear infinite;
}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* Reflet qui traverse un libelle (equivalent AnimatedShinyText).
   Porte par un pseudo-element en transform, jamais sur le texte lui-meme. */
.shine{position:relative;overflow:hidden}
.shine::after{
  content:"";position:absolute;top:0;left:0;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.14),transparent);
  transform:translate3d(-160%,0,0);
  animation:shine 5.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes shine{0%,62%{transform:translate3d(-160%,0,0)}100%{transform:translate3d(320%,0,0)}}

/* Compteur anime : l'increment est fait en JS, le CSS ne fait que reserver
   la largeur pour eviter le decalage de mise en page. */
.ticker{font-variant-numeric:tabular-nums;display:inline-block}

/* Lueur suivant le curseur sur une carte (equivalent MagicCard).
   Le degrade est positionne par deux variables mises a jour au pointeur. */
.spot{position:relative;isolation:isolate}
.spot::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),rgba(139,92,246,.14),transparent 62%);
  opacity:0;transition:opacity var(--t);pointer-events:none;
}
.spot:hover::before{opacity:1}
.spot>*{position:relative;z-index:1}

/* --- 13. Etats de contenu ------------------------------------------------ */

.skeleton{
  position:relative;overflow:hidden;
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.045);
}
.skeleton::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent);
  transform:translate3d(-100%,0,0);
  animation:skeleton 1.35s ease-in-out infinite;
}
@keyframes skeleton{to{transform:translate3d(100%,0,0)}}
.skeleton.text{height:11px;border-radius:5px}
.skeleton.title{height:17px;width:58%;border-radius:6px}
.skeleton.card{height:250px;border-radius:var(--r)}
.skeleton.line{height:40px}

.empty{
  display:grid;justify-items:center;gap:9px;
  padding:46px 26px;text-align:center;
  border:1px dashed var(--line-2);border-radius:var(--r);
  background:rgba(255,255,255,.012);
}
.empty-icon{
  display:grid;place-items:center;width:44px;height:44px;margin-bottom:3px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:rgba(255,255,255,.035);color:var(--muted);
}
.empty-icon svg{width:20px;height:20px}
.empty h3{font-size:16px}
.empty p{max-width:42ch;font-size:13.5px}
.empty .btn{margin-top:7px}

.notice{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 16px;border:1px solid var(--line-2);border-radius:var(--r);
  background:rgba(255,255,255,.028);
  font-size:13.5px;
}
.notice svg{width:17px;height:17px;flex:none;margin-top:1px}
.notice strong{display:block;margin-bottom:2px}
.notice.warn{border-color:rgba(251,191,36,.26);background:var(--warn-soft)}
.notice.warn svg{color:var(--warn)}
.notice.bad{border-color:rgba(251,113,133,.26);background:var(--bad-soft)}
.notice.bad svg{color:var(--bad)}
.notice.info{border-color:rgba(96,165,250,.24);background:var(--info-soft)}
.notice.info svg{color:var(--info)}
.notice.ok{border-color:rgba(52,211,153,.24);background:var(--ok-soft)}
.notice.ok svg{color:var(--ok)}

/* --- 14. Retour d'action ------------------------------------------------- */

.toast-stack{
  position:fixed;right:18px;bottom:18px;z-index:200;
  display:grid;gap:9px;width:min(340px,calc(100vw - 36px));
  pointer-events:none;
}
.toast{
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 14px;
  border:1px solid var(--line-2);border-radius:var(--r);
  background:rgba(18,20,30,.97);
  backdrop-filter:blur(14px);
  box-shadow:var(--sh-lg);
  font-size:13.5px;font-weight:560;
  pointer-events:auto;
  animation:toast-in .26s cubic-bezier(.2,.9,.3,1);
}
.toast.leaving{animation:toast-out .2s ease forwards}
.toast svg{width:16px;height:16px;flex:none;margin-top:1px;color:var(--ok)}
.toast.error svg{color:var(--bad)}
.toast.error{border-color:rgba(251,113,133,.3)}
@keyframes toast-in{from{opacity:0;transform:translate3d(0,10px,0) scale(.97)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translate3d(0,6px,0)}}

.tooltip{position:relative}
.tooltip::after{
  content:attr(data-tip);
  position:absolute;bottom:calc(100% + 7px);left:50%;
  transform:translate3d(-50%,4px,0);
  padding:5px 9px;border:1px solid var(--line-2);border-radius:7px;
  background:rgba(20,22,32,.98);
  font-size:11.5px;font-weight:580;color:var(--text-2);white-space:nowrap;
  opacity:0;pointer-events:none;
  transition:opacity var(--t-fast),transform var(--t-fast);
  z-index:60;
}
.tooltip:hover::after,.tooltip:focus-visible::after{opacity:1;transform:translate3d(-50%,0,0)}

/* --- 15. Modale ---------------------------------------------------------- */

.modal{
  position:fixed;inset:0;z-index:150;
  display:grid;place-items:center;
  padding:20px;
  background:rgba(4,5,10,.74);
  backdrop-filter:blur(6px);
  animation:fade-in .18s ease;
}
.modal[hidden]{display:none}
.modal-card{
  width:min(620px,100%);max-height:86vh;overflow-y:auto;
  border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:var(--surface);
  box-shadow:var(--sh-lg);
  animation:modal-in .24s cubic-bezier(.2,.9,.3,1);
}
.modal-card.wide{width:min(880px,100%)}
.modal-head{
  position:sticky;top:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:18px 22px;border-bottom:1px solid var(--line);
  background:var(--surface);
}
.modal-head h3{font-size:16px}
.modal-body{padding:22px}
.modal-foot{
  display:flex;justify-content:flex-end;gap:9px;
  padding:16px 22px;border-top:1px solid var(--line);
}
.modal-close{
  display:grid;place-items:center;width:32px;height:32px;
  border-radius:var(--r-xs);color:var(--muted);
  transition:background var(--t-fast),color var(--t-fast);
}
.modal-close:hover{background:rgba(255,255,255,.07);color:var(--text)}
.modal-close svg{width:16px;height:16px}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes modal-in{from{opacity:0;transform:translate3d(0,10px,0) scale(.985)}to{opacity:1;transform:none}}

.lightbox{
  position:fixed;inset:0;z-index:160;
  display:grid;place-items:center;padding:28px;
  background:rgba(3,4,8,.92);
  backdrop-filter:blur(8px);
  animation:fade-in .18s ease;
}
.lightbox[hidden]{display:none}
.lightbox img{
  max-width:100%;max-height:84vh;
  border:1px solid var(--line-2);border-radius:var(--r);
  box-shadow:var(--sh-lg);
}
.lightbox-bar{
  position:absolute;top:18px;right:18px;left:18px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.lightbox-count{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;width:44px;height:44px;
  border:1px solid var(--line-2);border-radius:50%;
  background:rgba(18,20,30,.8);color:var(--text);
  transition:background var(--t-fast);
}
.lightbox-nav:hover{background:rgba(30,33,46,.94)}
.lightbox-nav.prev{left:18px}
.lightbox-nav.next{right:18px}
.lightbox-nav svg{width:18px;height:18px}

/* --- 16. Tableaux -------------------------------------------------------- */

.table-wrap{
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);
  overflow-x:auto;
}
table.data{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
table.data th{
  padding:11px 14px;text-align:left;
  background:var(--surface-2);
  border-bottom:1px solid var(--line);
  font-size:11.5px;font-weight:660;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted-2);white-space:nowrap;
}
table.data td{padding:12px 14px;border-bottom:1px solid var(--line);color:var(--text-2);vertical-align:middle}
table.data tbody tr:last-child td{border-bottom:0}
table.data tbody tr{transition:background var(--t-fast)}
table.data tbody tr:hover{background:rgba(255,255,255,.022)}
table.data td.num{text-align:right;font-variant-numeric:tabular-nums}

/* Sur mobile, chaque ligne devient une fiche etiquetee par data-label. */
@media (max-width:720px){
  table.data.stack-mobile{min-width:0}
  table.data.stack-mobile thead{display:none}
  table.data.stack-mobile tr{
    display:grid;gap:5px;padding:13px 14px;border-bottom:1px solid var(--line);
  }
  table.data.stack-mobile td{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:0;border:0;
  }
  table.data.stack-mobile td::before{
    content:attr(data-label);
    font-size:11.5px;font-weight:620;color:var(--muted-2);
    text-transform:uppercase;letter-spacing:.05em;
  }
}

/* --- 17. Code ------------------------------------------------------------ */

.code-block{
  position:relative;
  border:1px solid var(--line);border-radius:var(--r);
  background:#0a0c14;
  overflow:hidden;
}
.code-block-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 10px 8px 14px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.022);
  font-size:11.5px;font-weight:620;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);
}
.code-block pre{
  margin:0;padding:15px;overflow-x:auto;
  font-family:var(--mono);font-size:12.8px;line-height:1.7;color:#d9dee9;
}
.code-copy{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 9px;border:1px solid var(--line-2);border-radius:7px;
  font-size:11.5px;font-weight:620;color:var(--muted);text-transform:none;letter-spacing:0;
  transition:background var(--t-fast),color var(--t-fast);
}
.code-copy:hover{background:rgba(255,255,255,.07);color:var(--text)}
.code-copy svg{width:13px;height:13px}
.code-copy.done{color:var(--ok);border-color:rgba(52,211,153,.3)}

code:not(pre code){
  padding:1.5px 5px;border:1px solid var(--line);border-radius:5px;
  background:rgba(255,255,255,.045);
  font-family:var(--mono);font-size:.88em;color:#ddd6ff;
}

/* --- 18. Fil d'ariane et pagination -------------------------------------- */

.breadcrumb{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-size:12.5px;color:var(--muted-2);
}
.breadcrumb a{transition:color var(--t-fast)}
.breadcrumb a:hover{color:var(--text-2)}
.breadcrumb svg{width:13px;height:13px;opacity:.5}
.breadcrumb [aria-current]{color:var(--text-2)}

.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:34px}
.pager a{
  display:grid;gap:3px;
  flex:1;padding:14px 16px;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);
  transition:border-color var(--t-fast),background var(--t-fast);
}
.pager a:hover{border-color:var(--line-2);background:var(--surface-2)}
.pager a small{font-size:11.5px;color:var(--muted-2)}
.pager a strong{font-size:14px}
.pager a.next{text-align:right}

/* --- 19. Annonce de site ------------------------------------------------- */

.site-announcement{
  position:fixed;left:50%;bottom:18px;z-index:120;
  transform:translateX(-50%);
  width:min(680px,calc(100vw - 32px));
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 12px 12px 16px;
  border:1px solid var(--line-2);border-radius:var(--r);
  background:rgba(18,20,30,.96);
  backdrop-filter:blur(16px);
  box-shadow:var(--sh-lg);
}
.site-announcement-message{display:flex;align-items:center;gap:11px;min-width:0}
.site-announcement-message strong{display:block;font-size:13.5px}
.site-announcement-message span{font-size:12.5px;color:var(--muted);display:block}
.site-announcement-actions{display:flex;align-items:center;gap:7px;flex:none}
.announcement-close{
  display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-xs);
  color:var(--muted);transition:background var(--t-fast),color var(--t-fast);
}
.announcement-close:hover{background:rgba(255,255,255,.07);color:var(--text)}
.announcement-close svg{width:14px;height:14px}
.site-announcement.warning{border-color:rgba(251,191,36,.3)}
.site-announcement.danger{border-color:rgba(251,113,133,.3)}
.site-announcement.success{border-color:rgba(52,211,153,.3)}

/* --- 20. Responsive de la coquille --------------------------------------- */

@media (max-width:1100px){
  .nav-links{display:none}
  .mobile-toggle{display:flex}
  .header-actions .desktop-only{display:none}
}
@media (max-width:880px){
  :root{--gap:16px;--pad:18px}
  .footer-main{grid-template-columns:1fr 1fr;gap:28px 20px}
  .footer-brand{grid-column:1/-1}
  .section-head{align-items:flex-start}
}
@media (max-width:560px){
  .container{width:min(100% - 28px,var(--max))}
  body{font-size:14.5px}
  .brand img{width:120px}
  .footer-main{grid-template-columns:1fr;gap:26px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:12px}
  .toast-stack{right:14px;left:14px;bottom:14px;width:auto}
  .site-announcement{width:calc(100vw - 24px);flex-direction:column;align-items:flex-start;gap:11px}
  .site-announcement-actions{width:100%;justify-content:flex-end}
}

/* --- 21. Mouvement reduit ------------------------------------------------ */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  [data-reveal]{opacity:1!important;transform:none!important}
  .marquee-track{animation:none;transform:none}
  a.card:hover,.card.interactive:hover{transform:none}
}

/* --- 22. Utilitaires ----------------------------------------------------- */

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.text-ok{color:var(--ok)}
.text-warn{color:var(--warn)}
.text-bad{color:var(--bad)}
.text-brand{color:var(--brand-ink)}
.mt-0{margin-top:0}
.mt-1{margin-top:8px}
.mt-2{margin-top:16px}
.mt-3{margin-top:24px}
.mt-4{margin-top:32px}
.tabnum{font-variant-numeric:tabular-nums}

/* ==========================================================================
   AURORA STORE V7.0.0 — MODULES DE PAGE
   Suite de aurora-v700.css. Chaque bloc correspond a une page publique.
   ========================================================================== */

/* --- 30. Carte ressource (accueil, catalogue, suggestions) --------------- */

/* auto-fill et non auto-fit : avec deux ressources en vitrine, auto-fit
   les etirerait sur toute la largeur. Les pistes vides gardent la carte
   a sa taille de lecture. */
.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(296px,1fr));
  gap:var(--gap);
}

.product-card{
  display:flex;flex-direction:column;
  overflow:hidden;
  background:var(--surface);
}
.product-card:hover .product-cover img{transform:scale(1.045)}
.product-card:hover .product-go{gap:9px;color:#e2dbff}

.product-cover{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:linear-gradient(140deg,#161a27,#0d0f18);
  border-bottom:1px solid var(--line);
}
.product-cover img{
  width:100%;height:100%;object-fit:cover;
  transition:transform var(--t-slow);
}
.product-cover-fallback{
  display:grid;place-items:center;height:100%;
  font-size:34px;color:var(--brand-3);
  background:
    radial-gradient(120px 90px at 50% 30%,rgba(139,92,246,.2),transparent 70%),
    linear-gradient(140deg,#161a27,#0d0f18);
}
.product-cover-tags{
  position:absolute;left:11px;top:11px;right:11px;
  display:flex;gap:6px;flex-wrap:wrap;
}
.product-cover-tags .chip{
  background:rgba(10,11,18,.8);backdrop-filter:blur(6px);
}

.product-body{display:flex;flex-direction:column;gap:11px;padding:16px;flex:1}
.product-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.product-top h3{font-size:16.5px;letter-spacing:-.02em}
.product-desc{
  font-size:13.5px;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.product-meta{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-size:12px;color:var(--muted-2);
}
.product-meta .sep{width:3px;height:3px;border-radius:50%;background:var(--muted-2);opacity:.6}
.product-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:13px;border-top:1px solid var(--line);
}
.product-price{display:grid;gap:1px}
.product-price small{font-size:11px;color:var(--muted-2)}
.product-price strong{font-size:17px;letter-spacing:-.02em}
.product-go{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:640;color:var(--brand-ink);
  transition:gap var(--t-fast),color var(--t-fast);
}
.product-go svg{width:14px;height:14px}

.product-card.maintenance .product-cover::after{
  content:"";position:absolute;inset:0;background:rgba(7,8,15,.42);
}

/* --- 31. Accueil --------------------------------------------------------- */

.hero{
  position:relative;
  padding-block:clamp(48px,7vw,92px) clamp(36px,4vw,56px);
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(28px,4vw,56px);
  align-items:center;
}
.hero-copy{max-width:620px}
.hero-copy h1{margin-block:16px 0}
.hero-copy .lead{margin-top:16px;font-size:17px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}

.hero-tag{
  display:inline-flex;align-items:center;gap:9px;
  padding:5px 13px 5px 6px;
  border:1px solid var(--line-2);border-radius:var(--r-full);
  background:rgba(255,255,255,.035);
  font-size:12.5px;font-weight:580;color:var(--text-2);
}
.hero-tag b{
  display:inline-flex;align-items:center;
  padding:2px 8px;border-radius:var(--r-full);
  background:var(--brand-soft);color:var(--brand-ink);
  font-size:11px;font-weight:700;letter-spacing:.04em;
}

.hero-trust{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  margin-top:30px;padding-top:22px;border-top:1px solid var(--line);
}
.hero-trust-item{display:grid;gap:2px}
.hero-trust-item strong{font-size:20px;letter-spacing:-.025em}
.hero-trust-item span{font-size:12px;color:var(--muted-2)}

/* Vitrine de la ressource mise en avant */
.hero-spot{
  position:relative;
  display:grid;gap:0;
  border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:var(--surface);
  box-shadow:var(--sh-lg);
  overflow:hidden;
}
.hero-spot-visual{
  position:relative;aspect-ratio:16/10;overflow:hidden;
  background:linear-gradient(140deg,#181d2c,#0c0e17);
}
.hero-spot-visual img{width:100%;height:100%;object-fit:cover}
.hero-spot-visual .product-cover-fallback{font-size:44px}
.hero-spot-visual::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 52%,rgba(10,11,18,.72));
}
.hero-spot-flag{
  position:absolute;left:14px;top:14px;z-index:2;
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 11px;border-radius:var(--r-full);
  background:rgba(10,11,18,.78);backdrop-filter:blur(8px);
  border:1px solid var(--line-2);
  font-size:11.5px;font-weight:640;color:var(--brand-ink);
  white-space:nowrap;
}
.hero-spot-body{
  display:grid;gap:12px;padding:18px 20px 20px;
}
.hero-spot-title{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.hero-spot-title h2{font-size:21px;letter-spacing:-.025em}
.hero-spot-title p{font-size:13.5px;margin-top:5px}
.hero-spot-price{text-align:right;flex:none}
.hero-spot-price strong{display:block;font-size:20px;letter-spacing:-.025em}
.hero-spot-price small{font-size:11px;color:var(--muted-2)}
.hero-spot-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:13px;border-top:1px solid var(--line);
}
.hero-spot-chips{display:flex;gap:6px;flex-wrap:wrap}

/* Bandeau de compatibilite : un Marquee discret, pas une demo. */
.compat-strip{
  padding-block:18px;
  border-block:1px solid var(--line);
  background:rgba(255,255,255,.012);
}
.compat-strip .marquee-track{--marquee-gap:40px}
.compat-item{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:620;color:var(--muted-2);
  white-space:nowrap;
}
.compat-item svg{width:15px;height:15px;color:var(--brand-3);opacity:.8}

/* Arguments : une grille asymetrique, pas six cartes identiques. */
.value-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--gap);
}
.value-card{
  display:grid;gap:11px;align-content:start;
  padding:22px;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);
}
.value-card.span-2{grid-column:span 2}
.value-icon{
  display:grid;place-items:center;width:36px;height:36px;
  border:1px solid var(--brand-line);border-radius:var(--r-sm);
  background:var(--brand-soft);color:var(--brand-3);
}
.value-icon svg{width:18px;height:18px}
.value-card h3{font-size:15.5px}
.value-card p{font-size:13.5px}
.value-card .value-detail{
  display:flex;gap:8px;flex-wrap:wrap;margin-top:3px;
}

/* Bloc licence : le seul endroit ou l'on montre du code sur l'accueil. */
.license-showcase{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(24px,3.4vw,44px);align-items:center;
}
.license-points{display:grid;gap:14px;margin-top:22px}
.license-point{display:flex;gap:11px;align-items:flex-start}
.license-point svg{width:17px;height:17px;color:var(--ok);flex:none;margin-top:2px}
.license-point strong{display:block;font-size:14px}
.license-point span{font-size:13px;color:var(--muted)}

/* Parcours de commande */
.steps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:var(--gap);counter-reset:step;
}
.step{
  position:relative;display:grid;gap:8px;align-content:start;
  padding:20px 20px 22px;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);
}
.step b{
  font-family:var(--mono);font-size:12px;font-weight:700;
  color:var(--brand-3);letter-spacing:.06em;
}
.step h3{font-size:15px}
.step p{font-size:13px}

/* Derniere activite */
.release-list{display:grid;gap:10px}
.release-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:14px;align-items:center;
  padding:15px 17px;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);
  transition:border-color var(--t-fast),background var(--t-fast);
}
a.release-row:hover{border-color:var(--line-2);background:var(--surface-2)}
.release-icon{
  display:grid;place-items:center;width:38px;height:38px;flex:none;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:rgba(255,255,255,.035);font-size:17px;
}
.release-main{min-width:0}
.release-main strong{display:block;font-size:14.5px}
.release-main p{
  font-size:13px;margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.release-side{display:grid;gap:5px;justify-items:end;flex:none}
.release-side time{font-size:12px;color:var(--muted-2);white-space:nowrap}

/* Appel final */
.cta-panel{
  position:relative;overflow:hidden;
  display:grid;gap:18px;justify-items:center;text-align:center;
  padding:clamp(34px,5vw,60px) clamp(22px,4vw,48px);
  border:1px solid var(--line-2);border-radius:var(--r-xl);
  background:
    radial-gradient(620px 260px at 50% 0%,rgba(139,92,246,.16),transparent 70%),
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
}
.cta-panel h2{max-width:18ch}
.cta-panel p{max-width:52ch}
.cta-panel .row{justify-content:center;margin-top:6px}

/* --- 32. Catalogue ------------------------------------------------------- */

.catalog-toolbar{
  position:sticky;top:var(--header-h);z-index:40;
  display:grid;gap:14px;
  padding:16px 0;
  background:rgba(7,8,15,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.catalog-toolbar-main{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.catalog-toolbar .search{flex:1;min-width:230px}
.catalog-filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.catalog-filter-group{display:flex;gap:8px;align-items:center}
.catalog-filter-group>span{
  font-size:11.5px;font-weight:620;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted-2);
}
.catalog-count{font-size:13px;color:var(--muted);margin-left:auto}
.catalog-count strong{color:var(--text)}

.sort-menu{position:relative}
.sort-trigger{
  display:inline-flex;align-items:center;gap:8px;
  min-height:38px;padding:0 12px;
  border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:rgba(255,255,255,.03);
  font-size:13px;font-weight:600;
}
.sort-trigger:hover{background:rgba(255,255,255,.07)}
.sort-trigger small{color:var(--muted-2);font-weight:560}
.sort-trigger svg{width:14px;height:14px;color:var(--muted);transition:transform var(--t-fast)}
.sort-trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
.sort-panel{
  position:absolute;top:calc(100% + 6px);right:0;z-index:45;
  width:200px;padding:5px;
  border:1px solid var(--line-2);border-radius:var(--r);
  background:rgba(16,18,27,.98);backdrop-filter:blur(16px);
  box-shadow:var(--sh-lg);
}
.sort-panel button{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;padding:8px 10px;border-radius:var(--r-xs);
  font-size:13px;font-weight:580;color:var(--text-2);text-align:left;
}
.sort-panel button:hover{background:rgba(255,255,255,.06)}
.sort-panel button.active{color:var(--brand-ink)}
.sort-panel button svg{width:14px;height:14px;opacity:0}
.sort-panel button.active svg{opacity:1}

.catalog-summary{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--line);
}
.catalog-summary-item{
  display:grid;gap:3px;padding:16px 18px;background:var(--surface);
}
.catalog-summary-item small{
  font-size:11px;font-weight:620;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-2);
}
.catalog-summary-item strong{font-size:19px;letter-spacing:-.025em}

/* --- 33. Fiche ressource ------------------------------------------------- */

.product-hero{padding-block:22px clamp(28px,3.4vw,44px)}
.product-hero-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  gap:clamp(26px,3.6vw,48px);align-items:start;
}
.product-hero-copy{display:grid;gap:16px;align-content:start;padding-top:8px}
.product-badges{display:flex;gap:7px;flex-wrap:wrap}
.product-hero h1{font-size:clamp(28px,3.2vw,40px)}
.product-hero .lead{font-size:16px}

.product-buy{
  display:grid;gap:14px;
  padding:18px;margin-top:4px;
  border:1px solid var(--line-2);border-radius:var(--r);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
}
.product-buy-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.product-buy-price{display:grid;gap:2px}
.product-buy-price small{font-size:11.5px;color:var(--muted-2)}
.product-buy-price strong{font-size:29px;letter-spacing:-.03em;line-height:1}
.product-buy-actions{display:grid;grid-template-columns:1fr auto;gap:9px}
.product-buy-note{font-size:12.5px;color:var(--muted-2);display:flex;align-items:center;gap:7px}
.product-buy-note svg{width:14px;height:14px;color:var(--ok)}

/* Galerie */
.product-visual{
  position:relative;
  border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:var(--surface);
  overflow:hidden;
  box-shadow:var(--sh-lg);
}
.product-visual-main{
  position:relative;aspect-ratio:16/10;
  background:linear-gradient(140deg,#181d2c,#0c0e17);
  cursor:zoom-in;
}
.product-visual-main img{width:100%;height:100%;object-fit:cover}
.product-visual-main .product-cover-fallback{font-size:52px}
.product-visual-zoom{
  position:absolute;right:12px;bottom:12px;
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 11px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:rgba(10,11,18,.78);backdrop-filter:blur(8px);
  font-size:12px;font-weight:620;
  opacity:0;transform:translateY(4px);
  transition:opacity var(--t-fast),transform var(--t-fast);
}
.product-visual-main:hover .product-visual-zoom{opacity:1;transform:none}
.product-visual-zoom svg{width:14px;height:14px}
.product-thumbs{
  display:flex;gap:8px;padding:10px;overflow-x:auto;
  border-top:1px solid var(--line);
}
.product-thumb{
  flex:none;width:84px;aspect-ratio:16/10;
  border:1px solid var(--line);border-radius:var(--r-xs);
  overflow:hidden;opacity:.55;
  transition:opacity var(--t-fast),border-color var(--t-fast);
}
.product-thumb img{width:100%;height:100%;object-fit:cover}
.product-thumb:hover{opacity:.85}
.product-thumb.active{opacity:1;border-color:var(--brand-line)}

/* Faits */
.product-facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1px;margin-top:var(--gap);
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--line);overflow:hidden;
}
.product-fact{display:grid;gap:3px;padding:14px 16px;background:var(--surface)}
.product-fact small{
  font-size:10.5px;font-weight:660;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);
}
.product-fact strong{font-size:14.5px;display:flex;align-items:center;gap:7px}

/* Navigation de section */
.product-nav{
  position:sticky;top:var(--header-h);z-index:35;
  display:flex;gap:2px;overflow-x:auto;
  padding:9px 0;
  background:rgba(7,8,15,.86);backdrop-filter:blur(14px);
  border-block:1px solid var(--line);
}
.product-nav a{
  padding:7px 13px;border-radius:var(--r-full);white-space:nowrap;
  font-size:13px;font-weight:600;color:var(--muted);
  transition:background var(--t-fast),color var(--t-fast);
}
.product-nav a:hover{color:var(--text);background:rgba(255,255,255,.05)}
.product-nav a.active{color:var(--text);background:rgba(255,255,255,.085)}

.product-section{padding-block:clamp(34px,4vw,54px)}
.product-section+.product-section{border-top:1px solid var(--line)}
.product-layout{
  display:grid;grid-template-columns:minmax(0,1fr) 300px;
  gap:clamp(24px,3vw,44px);align-items:start;
}
.product-aside{display:grid;gap:14px;position:sticky;top:calc(var(--header-h) + 62px)}

.prose{max-width:68ch}
.prose p{font-size:14.5px;line-height:1.72}
.prose p+p{margin-top:13px}

.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:12px}
.feature-item{
  display:flex;gap:11px;align-items:flex-start;
  padding:15px 16px;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);
  transition:border-color var(--t-fast),background var(--t-fast);
}
.feature-item:hover{border-color:var(--line-2);background:var(--surface-2)}
.feature-item svg{width:16px;height:16px;color:var(--brand-3);flex:none;margin-top:2px}
.feature-item span{font-size:13.5px;color:var(--text-2);font-weight:560;line-height:1.5}

.compat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.compat-row{
  display:flex;align-items:center;gap:11px;
  padding:12px 14px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);
}
.compat-code{
  display:grid;place-items:center;flex:none;
  min-width:42px;height:26px;padding:0 8px;
  border:1px solid var(--brand-line);border-radius:6px;
  background:var(--brand-soft);
  font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--brand-ink);
  letter-spacing:.04em;
}
.compat-row span{font-size:13.5px;color:var(--text-2);flex:1;min-width:0}
.compat-row svg{width:15px;height:15px;color:var(--ok);flex:none}

/* Versions */
.release-timeline{display:grid;gap:0;position:relative}
.release-item{
  position:relative;display:grid;gap:9px;
  padding:0 0 26px 30px;
}
.release-item::before{
  content:"";position:absolute;left:5px;top:6px;
  width:9px;height:9px;border-radius:50%;
  background:var(--surface-3);border:2px solid var(--muted-2);
}
.release-item.latest::before{background:var(--brand);border-color:var(--brand-3)}
.release-item::after{
  content:"";position:absolute;left:9px;top:19px;bottom:0;width:1px;background:var(--line);
}
.release-item:last-child{padding-bottom:0}
.release-item:last-child::after{display:none}
.release-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.release-head strong{font-size:15.5px;letter-spacing:-.02em}
.release-head time{font-size:12.5px;color:var(--muted-2)}
.release-body{font-size:13.5px;line-height:1.65;white-space:pre-line}

.channel-tabs{display:flex;gap:2px;margin-bottom:20px}

/* --- 34. Documentation --------------------------------------------------- */

.docs-layout{
  display:grid;grid-template-columns:238px minmax(0,1fr) 190px;
  gap:clamp(22px,3vw,40px);
  align-items:start;
  padding-block:30px 60px;
}
.docs-side{position:sticky;top:calc(var(--header-h) + 18px);max-height:calc(100vh - var(--header-h) - 40px);overflow-y:auto;padding-right:6px}
.docs-side .search{margin-bottom:16px}
.docs-side .search input{padding-right:14px}
.docs-nav-group{margin-bottom:18px}
.docs-nav-group h4{
  font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:8px;padding-inline:10px;
}
.docs-nav-group a{
  display:block;padding:7px 10px;border-radius:var(--r-xs);
  font-size:13.5px;font-weight:560;color:var(--muted);
  border-left:2px solid transparent;
  transition:color var(--t-fast),background var(--t-fast),border-color var(--t-fast);
}
.docs-nav-group a:hover{color:var(--text);background:rgba(255,255,255,.04)}
.docs-nav-group a.active{
  color:var(--text);background:var(--brand-soft);border-left-color:var(--brand);
}
.docs-main{min-width:0}
.docs-main h1{font-size:clamp(26px,2.8vw,34px);margin-bottom:12px}
.docs-article{max-width:75ch}
.docs-article h2{
  font-size:20px;margin-top:34px;padding-top:18px;border-top:1px solid var(--line);
  scroll-margin-top:calc(var(--header-h) + 20px);
}
.docs-article h3{font-size:16px;margin-top:24px;scroll-margin-top:calc(var(--header-h) + 20px)}
.docs-article p{font-size:14.5px;line-height:1.75;margin-top:11px}
.docs-article ul,.docs-article ol{margin:12px 0;padding-left:20px;color:var(--muted);font-size:14.5px;line-height:1.75}
.docs-article li+li{margin-top:5px}
.docs-article .code-block{margin-top:16px}
.docs-toc{position:sticky;top:calc(var(--header-h) + 18px)}
.docs-toc h4{
  font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:10px;
}
.docs-toc a{
  display:block;padding:5px 0 5px 11px;
  border-left:1px solid var(--line);
  font-size:12.5px;color:var(--muted-2);
  transition:color var(--t-fast),border-color var(--t-fast);
}
.docs-toc a:hover{color:var(--text-2)}
.docs-toc a.active{color:var(--brand-ink);border-left-color:var(--brand)}
.docs-toc a.sub{padding-left:22px}

.docs-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:22px}
.docs-card{
  display:grid;gap:7px;padding:17px;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);
}
.docs-card strong{font-size:14.5px}
.docs-card p{font-size:13px}

/* --- 35. Statut ---------------------------------------------------------- */

.status-banner{
  display:flex;align-items:center;gap:16px;
  padding:20px 24px;
  border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
}
.status-banner.ok{border-color:rgba(52,211,153,.28);background:linear-gradient(180deg,rgba(52,211,153,.09),rgba(52,211,153,.02))}
.status-banner.bad{border-color:rgba(251,113,133,.28);background:linear-gradient(180deg,rgba(251,113,133,.09),rgba(251,113,133,.02))}
.status-banner-icon{
  display:grid;place-items:center;width:44px;height:44px;flex:none;
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.055);
}
.status-banner-icon svg{width:22px;height:22px}
.status-banner.ok .status-banner-icon{background:var(--ok-soft);color:var(--ok)}
.status-banner.bad .status-banner-icon{background:var(--bad-soft);color:var(--bad)}
.status-banner strong{display:block;font-size:17px;letter-spacing:-.02em}
.status-banner span{font-size:13px;color:var(--muted)}
.status-banner .btn{margin-left:auto;flex:none}

.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:var(--gap)}
.service-card{display:grid;gap:13px;padding:18px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.service-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.service-title{display:flex;align-items:center;gap:11px;min-width:0}
.service-icon{
  display:grid;place-items:center;width:34px;height:34px;flex:none;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:rgba(255,255,255,.035);color:var(--muted);
}
.service-icon svg{width:17px;height:17px}
.service-card.ok .service-icon{border-color:rgba(52,211,153,.24);background:var(--ok-soft);color:var(--ok)}
.service-card.bad .service-icon{border-color:rgba(251,113,133,.24);background:var(--bad-soft);color:var(--bad)}
.service-title strong{display:block;font-size:14.5px}
.service-title span{font-size:12px;color:var(--muted-2)}
.service-card>p{font-size:13px}
.service-metrics{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));
  gap:10px;padding-top:13px;border-top:1px solid var(--line);
}
.service-metric{display:grid;gap:2px;min-width:0}
.service-metric small{font-size:10.5px;font-weight:620;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}
.service-metric strong{font-size:14px;letter-spacing:-.015em;overflow:hidden;text-overflow:ellipsis}

/* --- 36. Nouveautes et roadmap ------------------------------------------- */

.timeline{display:grid;gap:0;position:relative;padding-left:2px}
.timeline-entry{position:relative;padding:0 0 28px 32px}
.timeline-entry::before{
  content:"";position:absolute;left:6px;top:7px;width:9px;height:9px;border-radius:50%;
  background:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);
}
.timeline-entry::after{
  content:"";position:absolute;left:10px;top:20px;bottom:0;width:1px;background:var(--line);
}
.timeline-entry:last-child{padding-bottom:0}
.timeline-entry:last-child::after{display:none}
.timeline-date{
  font-size:11.5px;font-weight:660;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:7px;display:block;
}

.changelog-entry{
  display:grid;gap:11px;padding:18px 20px;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);
  transition:border-color var(--t-fast),background var(--t-fast);
}
a.changelog-entry:hover{border-color:var(--line-2);background:var(--surface-2)}
.changelog-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.changelog-title{display:flex;align-items:center;gap:11px;min-width:0}
.changelog-title i{
  display:grid;place-items:center;width:34px;height:34px;flex:none;font-style:normal;font-size:16px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:rgba(255,255,255,.035);
}
.changelog-title strong{display:block;font-size:14.5px}
.changelog-title span{font-size:12px;color:var(--muted-2)}
.changelog-body{font-size:13.5px;line-height:1.65;white-space:pre-line;color:var(--muted)}

.roadmap-columns{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:var(--gap)}
.roadmap-column{display:grid;gap:11px;align-content:start}
.roadmap-column-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-bottom:11px;border-bottom:1px solid var(--line);
}
.roadmap-column-head strong{display:flex;align-items:center;gap:8px;font-size:13.5px}
.roadmap-column-head span{
  font-size:11.5px;color:var(--muted-2);font-variant-numeric:tabular-nums;
  padding:2px 7px;border-radius:var(--r-full);background:rgba(255,255,255,.05);
}
.roadmap-item{
  display:grid;gap:6px;padding:14px 15px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);
}
.roadmap-item strong{font-size:13.5px}
.roadmap-item p{font-size:12.5px;line-height:1.55}

/* --- 37. Forum et blog --------------------------------------------------- */

.topic-row{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:15px 17px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  transition:border-color var(--t-fast),background var(--t-fast);
}
a.topic-row:hover{border-color:var(--line-2);background:var(--surface-2)}
.topic-avatar{
  display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:50%;
  background:var(--brand-grad);font-size:13px;font-weight:700;color:#fff;
}
.topic-main{min-width:0}
.topic-main strong{display:block;font-size:14.5px}
.topic-main span{font-size:12.5px;color:var(--muted-2)}
.topic-meta{display:grid;justify-items:end;gap:4px;flex:none}

.post{display:grid;gap:12px;padding:20px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.post-head{display:flex;align-items:center;gap:11px}
.post-head strong{font-size:14px}
.post-head time{font-size:12px;color:var(--muted-2);margin-left:auto}
.post-body{font-size:14px;line-height:1.7;white-space:pre-line;color:var(--text-2)}

.article-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--gap)}
.article-card{display:grid;gap:10px;padding:20px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.article-card h3{font-size:16px}
.article-card p{font-size:13.5px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* --- 38. Connexion et pages d'erreur ------------------------------------- */

.auth-shell{
  min-height:calc(100vh - var(--header-h));
  display:grid;place-items:center;padding:40px 20px 70px;
}
.auth-card{
  width:min(420px,100%);
  display:grid;gap:18px;justify-items:center;text-align:center;
  padding:34px 30px;
  border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:var(--surface);
  box-shadow:var(--sh-lg);
}
.auth-mark{
  display:grid;place-items:center;width:52px;height:52px;
  border-radius:var(--r);background:var(--brand-grad);
  box-shadow:var(--sh-brand);
}
.auth-mark svg{width:26px;height:26px;color:#fff}
.auth-card h1{font-size:23px}
.auth-card p{font-size:14px;max-width:34ch}
.auth-card .btn{width:100%}
.auth-features{
  display:grid;gap:9px;width:100%;padding-top:18px;margin-top:2px;
  border-top:1px solid var(--line);text-align:left;
}
.auth-feature{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--muted)}
.auth-feature svg{width:15px;height:15px;color:var(--ok);flex:none;margin-top:2px}

.error-shell{
  min-height:calc(100vh - var(--header-h));
  display:grid;place-items:center;padding:40px 20px 80px;text-align:center;
}
.error-code{
  font-size:clamp(78px,13vw,148px);font-weight:800;line-height:1;letter-spacing:-.05em;
  background:linear-gradient(140deg,#ffffff 12%,#b9aefb 50%,#5364ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* --- 39. Responsive des pages -------------------------------------------- */

@media (max-width:1180px){
  .docs-layout{grid-template-columns:220px minmax(0,1fr)}
  .docs-toc{display:none}
}
@media (max-width:1020px){
  .hero-grid{grid-template-columns:1fr;gap:32px}
  .hero-copy{max-width:none}
  .hero-spot{max-width:520px}
  .product-hero-grid{grid-template-columns:1fr}
  .product-layout{grid-template-columns:1fr}
  .product-aside{position:static;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));display:grid}
  .license-showcase{grid-template-columns:1fr}
  .value-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .value-card.span-2{grid-column:span 2}
}
@media (max-width:880px){
  .docs-layout{grid-template-columns:1fr;padding-block:22px 48px}
  .docs-side{
    position:static;max-height:none;overflow:visible;
    padding:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  }
  .docs-side .docs-nav-group{margin-bottom:12px}
  .catalog-toolbar{position:static;backdrop-filter:none;background:none}
  .catalog-count{margin-left:0;width:100%}
}
@media (max-width:680px){
  .value-grid{grid-template-columns:1fr}
  .value-card.span-2{grid-column:span 1}
  .hero-trust{gap:16px}
  .hero-trust-item strong{font-size:17px}
  .product-buy-top{flex-direction:column;align-items:flex-start;gap:10px}
  .product-buy-actions{grid-template-columns:1fr}
  .release-row{grid-template-columns:auto minmax(0,1fr);row-gap:10px}
  .release-side{grid-column:1/-1;justify-items:start}
  .status-banner{flex-wrap:wrap}
  .status-banner .btn{margin-left:0;width:100%}
  .product-nav{margin-inline:-18px;padding-inline:18px}
  .pager{flex-direction:column}

  /* Sur mobile, l'intitule du filtre passe au-dessus de ses pastilles :
     en ligne, il se retrouvait coince au milieu d'une rangee qui a
     deborde. */
  .catalog-filter-group{flex-direction:column;align-items:flex-start;gap:9px;width:100%}
  .catalog-toolbar .sort-menu,.sort-trigger{width:100%}
  .sort-trigger{justify-content:space-between}
  .sort-panel{width:100%}
  .catalog-toolbar .search{min-width:0}
}

/* ==========================================================================
   AURORA STORE — DIRECTION ARTISTIQUE V7.1.0

   La V7.0.0 avait refait le style sans toucher a la composition : memes
   sections, meme rythme, meme carte sombre partout. Resultat, une page qui
   ressemblait a l'ancienne en plus propre. Cette couche s'attaque a la
   composition elle-meme.

   Trois partis pris :

   1. Un motif de marque. Aurora n'avait aucun signe a elle : une tache
      violette floue, comme mille autres sites. On installe une vraie
      aurore — une bande de lumiere inclinee, dessinee en degrades
      coniques masques — et un chevron « A » qui sert de reperage de
      section.

   2. Trois niveaux de surface au lieu d'un. Le sol de la page, le panneau
      pose dessus, et le puits creuse dedans (code, caracteristiques,
      tableaux). Sans cette hierarchie, tout flotte au meme plan.

   3. La typographie technique en chasse fixe. Versions, ConVars,
      identifiants, compteurs : c'est ce qui dit « outil de developpeur »
      plutot que « boutique en ligne ».

   Regle de perf inchangee : aucune animation en boucle ne touche autre
   chose que transform et opacity, et jamais un element porteur d'un
   filter ou d'un background-clip:text.
   ========================================================================== */

/* --- 1. Le motif aurora --------------------------------------------------- */

:root{
  --aurora-1:#7c3aed;
  --aurora-2:#4f46e5;
  --aurora-3:#22d3ee;
  --well:#07080e;
}

/* La bande est un element a part, pose derriere le contenu. Elle n'est pas
   animee : un degrade conique anime se re-rasterise a chaque image. */
.aurora-band{
  position:absolute;
  inset:-180px 0 auto;
  height:620px;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
}
.aurora-band::before,
.aurora-band::after{
  content:"";
  position:absolute;
  left:50%;
  width:170%;
  height:340px;
  border-radius:50%;
  transform:translateX(-50%) rotate(-7deg);
  filter:blur(80px);
  opacity:.5;
}
.aurora-band::before{
  top:60px;
  background:
    radial-gradient(60% 100% at 20% 50%,rgba(124,58,237,.55),transparent 70%),
    radial-gradient(50% 100% at 55% 50%,rgba(79,70,229,.45),transparent 70%),
    radial-gradient(40% 100% at 85% 50%,rgba(34,211,238,.22),transparent 70%);
}
.aurora-band::after{
  top:130px;
  height:220px;
  transform:translateX(-50%) rotate(5deg);
  opacity:.34;
  background:radial-gradient(55% 100% at 40% 50%,rgba(167,139,250,.5),transparent 72%);
}

/* Trame fine par-dessus la bande : elle donne une matiere et empeche le
   degrade de paraitre plastique. */
.aurora-band .band-mesh{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 75%);
  mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 75%);
}

/* Grain statique : une seule image encodee, aucun cout d'animation. */
body::after{
  opacity:.4;
  background-image:
    linear-gradient(rgba(255,255,255,.013) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.013) 1px,transparent 1px);
  background-size:64px 64px;
}

/* Chevron de marque, repris du « A » du logo. Sert de puce de section. */
.mark-a{
  display:inline-block;width:14px;height:12px;flex:none;
  background:linear-gradient(135deg,var(--aurora-1),var(--aurora-2));
  clip-path:polygon(50% 0,100% 100%,72% 100%,50% 45%,28% 100%,0 100%);
}

/* --- 2. Surfaces ---------------------------------------------------------- */

/* Le puits : creuse dans le panneau, pour tout ce qui est donnee brute. */
.well{
  border:1px solid rgba(255,255,255,.05);
  border-radius:var(--r);
  background:var(--well);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),inset 0 14px 34px rgba(0,0,0,.34);
}

/* Filet a fondu, pour separer sans trancher. */
.hairline{
  height:1px;border:0;margin:0;
  background:linear-gradient(90deg,transparent,var(--line-2) 18%,var(--line-2) 82%,transparent);
}

/* --- 3. Typographie technique --------------------------------------------- */

.overline{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-ink);
}

.tech{
  font-family:var(--mono);
  font-size:.88em;letter-spacing:-.01em;
  color:var(--text-2);
}

/* Etiquette technique : version, framework, dependance. */
.tag{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 8px;
  border:1px solid rgba(255,255,255,.08);border-radius:6px;
  background:rgba(255,255,255,.035);
  font-family:var(--mono);font-size:11px;font-weight:500;
  color:var(--muted);white-space:nowrap;
}
.tag.on{border-color:var(--brand-line);background:var(--brand-soft);color:#d5c9ff}
.tag-row{display:flex;gap:6px;flex-wrap:wrap}

/* --- 4. Titres de section ------------------------------------------------- */

/* Un index numerote et un filet : la page devient un sommaire, les sections
   cessent de se ressembler. */
.section-head{
  align-items:flex-end;
  gap:24px;
  margin-bottom:30px;
  padding-bottom:18px;
  position:relative;
}
.section-head::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--line-2),transparent 60%);
}
.section-head h2{font-size:clamp(24px,2.5vw,33px);letter-spacing:-.03em}
.section-index{
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.12em;color:var(--muted-2);
  display:block;margin-bottom:12px;
}
.section-index b{color:var(--brand-ink);font-weight:600}

/* --- 5. Hero -------------------------------------------------------------- */

.hero{position:relative;padding-block:clamp(56px,8vw,104px) clamp(40px,5vw,72px)}

.hero-grid{
  grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(30px,4.5vw,64px);
  align-items:center;
}

.hero-copy h1{
  font-size:clamp(38px,5vw,62px);
  line-height:1.02;
  letter-spacing:-.042em;
  font-weight:800;
  margin-block:18px 0;
}
.hero-copy .lead{
  font-size:17px;line-height:1.6;max-width:46ch;margin-top:18px;
  color:var(--muted);
}
.hero-actions{margin-top:30px}

/* Barre de caracteristiques : chasse fixe, filets verticaux, aucun encadre.
   Elle remplace les trois gros chiffres qui faisaient « page marketing ». */
.hero-spec{
  display:flex;flex-wrap:wrap;
  margin-top:36px;
  border-top:1px solid var(--line);
  padding-top:20px;
  gap:0;
}
.hero-spec-item{
  display:grid;gap:5px;
  padding-right:26px;margin-right:26px;
  border-right:1px solid var(--line);
}
.hero-spec-item:last-child{border-right:0;padding-right:0;margin-right:0}
.hero-spec-item b{
  font-family:var(--mono);font-size:19px;font-weight:600;letter-spacing:-.02em;
  color:var(--text);font-variant-numeric:tabular-nums;
}
.hero-spec-item span{
  font-size:11.5px;letter-spacing:.02em;color:var(--muted-2);
  max-width:16ch;line-height:1.35;
}

/* Le visuel : une fenetre, pas une carte. Barre de titre, ombre portee
   large, reflet en bas. C'est ce qui donne la profondeur qui manquait. */
.hero-frame{
  position:relative;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg,rgba(28,31,45,.9),rgba(12,14,22,.94));
  box-shadow:
    0 2px 0 rgba(255,255,255,.04) inset,
    0 40px 90px -30px rgba(0,0,0,.85),
    0 0 0 1px rgba(124,58,237,.08),
    0 24px 70px -40px rgba(124,58,237,.5);
  overflow:hidden;
  transform:perspective(1400px) rotateY(-3.5deg) rotateX(1.2deg);
  transform-origin:left center;
  transition:transform var(--t-slow);
}
.hero-frame:hover{transform:perspective(1400px) rotateY(-1.5deg) rotateX(.4deg)}

.hero-frame-bar{
  display:flex;align-items:center;gap:8px;
  padding:9px 13px;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.025);
}
.hero-frame-dots{display:flex;gap:5px}
.hero-frame-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.14)}
.hero-frame-name{
  font-family:var(--mono);font-size:11px;color:var(--muted-2);
  margin-inline:auto;padding-inline:10px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hero-frame-live{
  display:inline-flex;align-items:center;gap:6px;
  font-size:10.5px;font-family:var(--mono);color:#7ce3bd;
}

.hero-frame-shot{
  position:relative;display:block;
  aspect-ratio:16/10;overflow:hidden;
  background:linear-gradient(140deg,#161a27,#0b0d15);
}
.hero-frame-shot img{width:100%;height:100%;object-fit:cover;object-position:top left}
.hero-frame-shot .product-cover-fallback{font-size:46px}

/* La colonne visuelle du hero sert de repere de position a la vignette. */
.hero-grid>div:last-child{position:relative}

/* Vignette de licence, posee a cheval sur le cadre : un detail concret qui
   raconte le produit mieux qu'une phrase. */
.hero-badge{
  position:absolute;right:-14px;bottom:22px;z-index:3;
  display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;
  padding:11px 14px;
  border:1px solid rgba(255,255,255,.12);border-radius:12px;
  background:rgba(14,16,25,.93);
  backdrop-filter:blur(14px);
  box-shadow:0 20px 44px -18px rgba(0,0,0,.9);
}
.hero-badge-icon{
  display:grid;place-items:center;width:30px;height:30px;
  border-radius:9px;background:var(--ok-soft);color:var(--ok);
}
.hero-badge-icon svg{width:16px;height:16px}
.hero-badge strong{display:block;font-size:12.5px;line-height:1.2}
.hero-badge span{font-family:var(--mono);font-size:10.5px;color:var(--muted-2)}

/* --- 6. Bandeau de compatibilite ------------------------------------------ */

.compat-strip{
  padding-block:15px;
  border-block:1px solid var(--line);
  background:rgba(255,255,255,.008);
}
.compat-item{
  font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.01em;color:var(--muted-2);
}
.compat-item svg{width:13px;height:13px;color:var(--brand-3);opacity:.7}

/* --- 7. Bento « ce qui est livre » ---------------------------------------- */

/* Cinq cartes identiques ne disent rien. Ici chaque tuile a sa propre
   matiere : une porte un puits de code, une autre une liste d'etats, une
   autre une mini-chronologie. */
.bento{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:14px;
}
.bento-tile{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:12px;
  padding:22px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
  transition:border-color var(--t);
}
.bento-tile:hover{border-color:var(--line-2)}
.bento-tile.lead{grid-column:span 3;grid-row:span 2}
.bento-tile.half{grid-column:span 3}
.bento-tile.third{grid-column:span 2}

/* Un liseré aurora sur l'arete haute des tuiles principales. */
.bento-tile.lead::before,
.bento-tile.accent::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--aurora-1) 30%,var(--aurora-3) 70%,transparent);
  opacity:.55;
}

.bento-tile h3{font-size:16px;letter-spacing:-.02em}
.bento-tile p{font-size:13.5px;line-height:1.6}
.bento-icon{
  display:grid;place-items:center;width:34px;height:34px;
  border:1px solid var(--brand-line);border-radius:10px;
  background:var(--brand-soft);color:var(--brand-3);
}
.bento-icon svg{width:17px;height:17px}
.bento-foot{margin-top:auto;padding-top:4px}

/* Liste d'etats, dans la tuile licence. */
.state-list{display:grid;gap:8px;margin-top:2px}
.state-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;
  padding:9px 11px;
  border-radius:9px;
  background:rgba(255,255,255,.028);
  font-size:12.5px;
}
.state-row .tech{font-size:11.5px;color:var(--muted-2)}

/* Mini-chronologie, dans la tuile mises a jour. */
.mini-log{display:grid;gap:9px;margin-top:2px}
.mini-log-row{
  display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:baseline;
  font-size:12.5px;
}
.mini-log-row time{font-family:var(--mono);font-size:11px;color:var(--muted-2)}

/* --- 8. Bloc licence ------------------------------------------------------ */

.license-showcase{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}

/* Le bloc de code devient un puits avec une reponse du serveur : on montre
   le systeme en marche, pas un extrait de configuration mort. */
.terminal{overflow:hidden}
.terminal-head{
  display:flex;align-items:center;gap:9px;
  padding:9px 13px;
  border-bottom:1px solid rgba(255,255,255,.055);
  background:rgba(255,255,255,.02);
  font-family:var(--mono);font-size:11px;color:var(--muted-2);
}
/* Sans contrainte, le SVG herite du `max-width:100%` de la base et remplit
   tout le bloc : l'icone mangeait le code. */
.terminal-head svg,
.terminal-out svg{width:14px;height:14px;flex:none}
.terminal-body{
  margin:0;padding:16px;overflow-x:auto;
  font-family:var(--mono);font-size:12.6px;line-height:1.8;
  color:#cfd6e4;
}
.terminal-body .c{color:var(--muted-2)}
.terminal-body .k{color:#c4b5fd}
.terminal-body .s{color:#7ce3bd}
.terminal-body .v{color:#fbbf24}
.terminal-out{
  display:flex;align-items:center;gap:9px;
  padding:11px 16px;
  border-top:1px solid rgba(255,255,255,.055);
  background:rgba(52,211,153,.05);
  font-family:var(--mono);font-size:11.5px;color:#7ce3bd;
}
.terminal-out svg{width:14px;height:14px}

.license-points{gap:2px;margin-top:26px}
.license-point{
  gap:12px;padding:12px 0;
  border-bottom:1px solid var(--line);
}
.license-point:last-child{border-bottom:0}
.license-point strong{font-size:13.5px}
.license-point span{font-size:12.5px;line-height:1.5}

/* --- 9. Parcours en escalier ---------------------------------------------- */

/* Quatre cartes alignees ne racontent pas une suite. Un rail horizontal
   avec des paliers, si. */
.stepper{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  position:relative;
}
.stepper::before{
  content:"";position:absolute;left:0;right:0;top:19px;height:1px;
  background:linear-gradient(90deg,var(--brand-line),var(--line) 70%,transparent);
}
.step{
  position:relative;
  padding:0 22px 0 0;
  border:0;background:none;border-radius:0;
  display:grid;gap:9px;align-content:start;
}
.step-dot{
  position:relative;z-index:1;
  display:grid;place-items:center;
  width:38px;height:38px;
  border:1px solid var(--line-2);border-radius:50%;
  background:var(--bg);
  font-family:var(--mono);font-size:12px;font-weight:600;color:var(--brand-ink);
}
.step:first-child .step-dot{border-color:var(--brand-line);background:var(--brand-soft)}
.step h3{font-size:14.5px;margin-top:6px}
.step p{font-size:12.8px;line-height:1.6;max-width:30ch}

/* --- 10. Carte ressource -------------------------------------------------- */

.product-grid{gap:16px}

.product-card{
  border-radius:var(--r-lg);
  background:var(--surface);
  overflow:hidden;
  transition:border-color var(--t),transform var(--t),box-shadow var(--t);
}
a.product-card:hover{
  transform:translateY(-3px);
  border-color:var(--line-2);
  box-shadow:0 24px 50px -28px rgba(0,0,0,.9);
}
/* Arete lumineuse revelee au survol, alignee sur le motif de marque. */
.product-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--aurora-1) 35%,var(--aurora-3) 75%,transparent);
  opacity:0;transition:opacity var(--t);
}
a.product-card:hover::before{opacity:.8}

.product-cover{aspect-ratio:16/9;border-bottom:1px solid var(--line)}
.product-cover::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(8,9,15,.55));
  pointer-events:none;
}
.product-cover-tags{top:10px;left:10px;right:10px}
.product-cover-tags .chip{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.02em;
  padding:3px 8px;border-radius:6px;
  background:rgba(8,9,15,.82);backdrop-filter:blur(8px);
}

.product-body{padding:17px 17px 15px;gap:10px}
.product-top h3{font-size:17px;letter-spacing:-.025em}
.product-top .chip{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;
  border-radius:6px;padding:3px 8px;
}
.product-desc{font-size:13px;color:var(--muted);line-height:1.55}

.product-meta{
  font-family:var(--mono);font-size:11px;letter-spacing:.01em;color:var(--muted-2);
}

.product-foot{
  padding-top:13px;
  border-top:1px solid var(--line);
  align-items:flex-end;
}
.product-price small{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted-2);
}
.product-price strong{font-size:19px;letter-spacing:-.03em}
.product-go{
  font-size:12.5px;
  padding:7px 11px;border-radius:8px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast);
}
a.product-card:hover .product-go{
  border-color:var(--brand-line);background:var(--brand-soft);color:#ddd3ff;
}

/* --- 11. Activite --------------------------------------------------------- */

.release-row{
  border-radius:var(--r);
  padding:14px 16px;
}
.release-icon{
  border-radius:10px;
  font-family:var(--mono);font-size:15px;
}
.release-main strong{font-size:14px}
.release-main strong .muted{font-family:var(--mono);font-size:12px}
.release-side time{font-family:var(--mono);font-size:11px}

/* --- 12. Appel final ------------------------------------------------------ */

.cta-panel{
  position:relative;
  border-radius:var(--r-xl);
  border-color:rgba(255,255,255,.1);
  background:
    radial-gradient(90% 150% at 50% -30%,rgba(124,58,237,.3),transparent 62%),
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.008));
  overflow:hidden;
}
.cta-panel::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--aurora-1) 25%,var(--aurora-3) 70%,transparent);
  opacity:.7;
}
.cta-panel h2{font-size:clamp(26px,3.2vw,40px);letter-spacing:-.035em;max-width:16ch}

/* --- 13. En-tetes de page ------------------------------------------------- */

/* La bande aurora du hero se retrouve, en plus discret, en tete de chaque
   page interieure : c'est ce qui fait qu'on reconnait le site d'un coup
   d'oeil. Le flou est statique, jamais anime — un filter anime se
   recalcule a chaque image. */
.page-head::before,
.product-hero::before{
  content:"";
  position:absolute;inset:-240px 0 auto;height:560px;
  z-index:-1;pointer-events:none;
  opacity:.8;
  filter:blur(70px);
  background:
    radial-gradient(56% 90% at 16% 45%,rgba(124,58,237,.3),transparent 66%),
    radial-gradient(44% 80% at 58% 32%,rgba(79,70,229,.2),transparent 70%),
    radial-gradient(34% 70% at 88% 48%,rgba(34,211,238,.1),transparent 72%);
}

.page-head{position:relative;padding-block:clamp(44px,5.5vw,76px) 10px}
.page-head h1{
  font-size:clamp(32px,4vw,48px);letter-spacing:-.038em;font-weight:800;
  margin-top:16px;
}
.page-head .lead{font-size:16px;max-width:52ch;color:var(--muted)}

/* --- 14. Catalogue -------------------------------------------------------- */

/* Le resume passe en bandeau de caracteristiques, aligne sur le hero. */
.catalog-summary{
  border:0;background:none;gap:0;
  display:flex;flex-wrap:wrap;
  border-top:1px solid var(--line);
  padding-top:18px;
}
.catalog-summary-item{
  background:none;padding:0;
  display:grid;gap:5px;
  padding-right:28px;margin-right:28px;
  border-right:1px solid var(--line);
}
.catalog-summary-item:last-child{border-right:0;padding-right:0;margin-right:0}
.catalog-summary-item small{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--muted-2);
}
.catalog-summary-item strong{
  font-family:var(--mono);font-size:17px;font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}

.catalog-toolbar{background:rgba(7,8,15,.9)}
.catalog-filter-group>span{font-family:var(--mono);font-size:10px;letter-spacing:.1em}
.pill{font-size:12.5px;border-radius:8px}
.pill .muted{font-family:var(--mono);font-size:11px}
.catalog-count{font-family:var(--mono);font-size:12px;color:var(--muted-2)}

/* --- 15. Fiche ressource -------------------------------------------------- */

.product-hero{position:relative;padding-block:26px clamp(32px,4vw,52px)}
.product-hero h1{
  font-size:clamp(32px,4vw,48px);letter-spacing:-.04em;font-weight:800;
}
.product-hero-grid{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr)}

/* Le visuel de la fiche reprend le cadre du hero. */
.product-visual{
  border-radius:16px;
  border-color:rgba(255,255,255,.1);
  box-shadow:0 40px 90px -34px rgba(0,0,0,.85),0 0 0 1px rgba(124,58,237,.07);
}
.product-visual-main{aspect-ratio:16/9}

/* Les caracteristiques deviennent une fiche technique en puits. */
.product-facts{
  border:1px solid rgba(255,255,255,.05);
  border-radius:var(--r);
  background:var(--well);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  gap:1px;
}
.product-fact{background:transparent;padding:13px 15px}
.product-fact+.product-fact{box-shadow:inset 1px 0 0 rgba(255,255,255,.05)}
.product-fact small{font-family:var(--mono);font-size:10px;letter-spacing:.09em}
.product-fact strong{font-family:var(--mono);font-size:13px;font-weight:500}

.product-buy{
  border-radius:var(--r-lg);
  border-color:rgba(255,255,255,.1);
  background:
    radial-gradient(120% 140% at 0% 0%,rgba(124,58,237,.14),transparent 60%),
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.01));
}
.product-buy-price strong{font-size:32px;letter-spacing:-.04em}
.product-buy-price small{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
.product-buy-note{font-family:var(--mono);font-size:11.5px}

.product-nav{background:rgba(7,8,15,.92)}
.product-nav a{font-size:12.5px}

.feature-item{border-radius:10px;padding:13px 15px}
.feature-item span{font-size:13px}
.compat-row{border-radius:10px}
.compat-code{font-size:10px;border-radius:5px}

.release-item .release-head strong{font-family:var(--mono);font-size:14.5px;font-weight:600}
.release-head time{font-family:var(--mono);font-size:11.5px}

/* --- 16. Responsive ------------------------------------------------------- */

@media (max-width:1020px){
  /* Cette couche est concatenee APRES la base : ses regles de grille
     gagnent a specificite egale, y compris a l'interieur des media
     queries de la base. Toute grille redefinie plus haut doit donc etre
     remise en une colonne ici, sinon le hero reste sur deux colonnes sur
     telephone et le visuel passe par-dessus le texte. */
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .product-hero-grid{grid-template-columns:1fr}

  .hero-frame{transform:none}
  .hero-frame:hover{transform:none}
  .hero-badge{right:12px;bottom:12px}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento-tile.lead,.bento-tile.half,.bento-tile.third{grid-column:span 1;grid-row:auto}
  .stepper{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 0}
  .stepper::before{display:none}
  .license-showcase{grid-template-columns:1fr}
}

@media (max-width:680px){
  .section-head{align-items:flex-start}
  .hero-copy h1{font-size:clamp(31px,8vw,38px)}
  .hero-copy .lead{font-size:15.5px}
  .hero-spec{gap:16px 0}
  .hero-spec-item{padding-right:18px;margin-right:18px}
  .hero-spec-item b{font-size:16px}
  .bento{grid-template-columns:1fr}
  .stepper{grid-template-columns:1fr;gap:20px}
  .step{padding-right:0}
  .catalog-summary{gap:14px 0}
  .catalog-summary-item{padding-right:18px;margin-right:18px}
  .section-head{gap:14px}
  .hero-badge{position:static;margin-top:12px}
}

@media (prefers-reduced-motion:reduce){
  .hero-frame,.hero-frame:hover{transform:none}
  a.product-card:hover{transform:none}
}