/* Polices auto-hebergees : la CSP du site est `font-src 'self'`, une feuille Google
   Fonts serait bloquee (et l'elargir ouvrirait le site a un tiers). Genere par
   scratchpad/release080/fonts.py depuis l'API css2 — ne pas editer a la main.
   Sous-ensembles : latin, latin-ext, cyrillic, cyrillic-ext. Le chinois n'est couvert
   par aucune des deux polices : il tombe sur la pile systeme (cf. --police-*). */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/archivo-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/archivo-500-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;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/archivo-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/archivo-700-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;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/archivo-900-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/archivo-900-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;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-400-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-400-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;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-500-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-500-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;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Inrust — site refait (hub hexagonal, direction « Le sextant »).

   TOUT le style du site vit ici. La CSP de production est `style-src 'self'` :
   un attribut style="" s'affiche en local et DISPARAÎT en ligne (le piège déjà
   payé une fois sur l'ancien site). Le générateur refuse de produire une page
   qui en contient un — cf. site-src/build.mjs.

   Les valeurs viennent de la maquette validée (artifact « Inrust — hub
   hexagonal ») : 644 styles inline y portaient 139 motifs distincts, repris
   ci-dessous en classes. Les noms de classes sont ceux de la maquette, pour que
   les deux restent comparables à l'œil.

   Le bloc @font-face est ajouté EN TÊTE par le générateur (site-src/partials/
   fonts.css, lui-même généré depuis l'API Google Fonts puis auto-hébergé).
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Fonds */
  --fond:#07090C;          /* la page */
  --panneau:#0A0D11;       /* pied de page, formulaires */
  --carte:#0C0F14;         /* cartes et encarts */
  --carte-on:#0E1218;      /* carte survolée */
  /* Traits : quatre opacités, et pas une de plus */
  --trait:rgba(255,255,255,.08);
  --trait2:rgba(255,255,255,.1);
  --trait3:rgba(255,255,255,.12);
  --trait4:rgba(255,255,255,.16);
  /* Texte. --gris2 est la limite basse lisible sur --fond (4,5:1) : ne pas
     descendre plus bas, c'est le défaut relevé sur l'ancien site (#5A5550). */
  --texte:#F0EDE8;
  --gris:#9A9590;
  --gris2:#8A847D;
  /* Accent */
  --rust:#E8522A;
  --rust-clair:#FF7A4A;
  --rust-voile:rgba(232,82,42,.07);
  --rust-trait:rgba(232,82,42,.4);
  --rust-fil:rgba(232,82,42,.42);
  --rust-fil2:rgba(232,82,42,.3);
  /* Typo. Archivo ne couvre PAS le cyrillique et aucune des deux polices ne
     couvre le chinois : la pile système prend le relais glyphe par glyphe. */
  --police:Archivo,system-ui,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Consolas,monospace;
  --large:1180px;          /* colonne des pages de section */
  --large-doc:1020px;      /* colonne des pages de texte (accès, légales) */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--fond);color:var(--texte);
  font-family:var(--police);-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}
:focus-visible{outline:2px solid var(--rust-clair);outline-offset:4px;border-radius:3px}

/* La page entière, en colonne : le pied de page tombe en bas même sur une page courte. */
/* .muet : présent pour un lecteur d'écran et pour un robot, invisible à l'œil.
   Le hub n'a pas de titre dessiné — la marque vit dans l'hexagone, qui est un
   décor (aria-hidden) : sans ce titre, la page d'accueil n'avait AUCUN h1. */
.muet{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.page{min-height:100vh;display:flex;flex-direction:column;position:relative;isolation:isolate}

/* ═══ Fond : la trame d'arrière-plan, strictement décorative ════════════════ */
.fond{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--fond)}
.fond canvas{display:block;width:100%;height:100%}

/* ═══ En-tête collante ═════════════════════════════════════════════════════ */
.hdr{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  padding:20px 44px;border-bottom:1px solid var(--trait);
  position:sticky;top:0;z-index:20;
  background:rgba(7,9,12,.86);backdrop-filter:blur(8px);
}
.hdr-logo{display:inline-flex;align-items:center;gap:11px}
.hdr-logo svg{width:30px;height:26px;flex:none}
.hdr-logo .bk{font-size:19px;font-weight:900;letter-spacing:2.6px}
.hdr-logo:hover .bk,.hdr-logo:focus-visible .bk{color:var(--rust-clair)}
.hdr-logo:hover .hx,.hdr-logo:focus-visible .hx{stroke:var(--rust-clair)}
.hdr-fil{font-family:var(--mono);font-size:11.5px;letter-spacing:1.6px;color:var(--gris2)}
.hdr-droite{margin-left:auto;display:flex;align-items:center;gap:14px}
.hdr-lang{
  font-family:var(--mono);font-size:12px;letter-spacing:1.4px;color:var(--gris);
  border:1px solid var(--trait4);padding:8px 12px;border-radius:3px;
}
.hdr-lang:hover{color:var(--rust-clair)}

/* Sélecteur de langue : un <details>. Il s'ouvre, se ferme, se replie au clavier
   et se lit par un lecteur d'écran SANS une ligne de JavaScript — et chaque
   option est un vrai lien vers la page traduite, donc le robot les suit aussi.
   Dix langues escamotées derrière un script, c'était dix versions invisibles. */
.lang{position:relative}
.lang>summary{display:inline-block;cursor:pointer;list-style:none}
.lang>summary::-webkit-details-marker{display:none}
.lang>summary::marker{content:''}
.lang[open]>summary{color:var(--rust-clair);border-color:var(--rust-trait)}
.lang-menu{
  position:absolute;top:calc(100% + 6px);right:0;z-index:30;
  min-width:158px;max-height:min(70vh,420px);overflow:auto;
  display:flex;flex-direction:column;padding:6px;
  background:var(--carte);border:1px solid var(--trait4);border-radius:3px;
  box-shadow:0 18px 40px rgba(0,0,0,.55);
}
.lang-opt{
  font-size:13px;color:var(--gris);padding:7px 10px;border-radius:2px;
  white-space:nowrap;transition:color .18s ease,background .18s ease;
}
.lang-opt:hover,.lang-opt:focus-visible{color:var(--texte);background:var(--carte-on)}
.lang-opt.on{color:var(--rust-clair)}
.dsc{font-family:var(--mono);font-size:12px;letter-spacing:1.4px;color:var(--gris);transition:color .18s ease}
.dsc:hover,.dsc:focus-visible{color:var(--rust-clair)}
.cta{
  font-family:var(--police);font-size:13px;font-weight:700;letter-spacing:.6px;
  color:var(--fond);background:var(--rust);padding:11px 20px;border-radius:3px;
  transition:background .18s ease;
}
.cta:hover{background:var(--rust-clair)}

/* Barre des pages, téléphone seulement : elle remplace le mini hexagone, qui
   demande une largeur dont on ne dispose pas. */
.pgs{display:none}
.pgs a{
  font-family:var(--mono);font-size:11px;letter-spacing:1.2px;color:var(--gris);
  padding:8px 0 6px;border-bottom:2px solid transparent;
}
.pgs a.on{color:var(--rust-clair);border-bottom-color:var(--rust)}

/* ═══ Guides : trois cartes, dont deux encore à venir ════════════════ */
.cartes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:44px}
.carte-l{display:block;border:1px solid var(--trait2);background:var(--carte);padding:26px 24px;transition:border-color .2s ease}
.carte-l:hover,.carte-l:focus-visible{border-color:var(--rust-trait)}
.carte-l .eb{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:1.8px;color:var(--rust-clair)}
.carte-l .ttl{display:block;font-size:22px;font-weight:900;letter-spacing:-.2px;line-height:1.2;margin:11px 0 9px;transition:color .18s ease}
.carte-l:hover .ttl,.carte-l:focus-visible .ttl{color:var(--rust-clair)}
.carte-l .txt{display:block;font-size:13.5px;color:var(--gris);line-height:1.6}
/* À venir : le pointillé dit « pas encore » sans qu'il faille le lire. */
.carte-off{border:1px dashed var(--trait4);background:var(--panneau);padding:26px 24px}
.carte-off .eb{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:1.8px;color:var(--gris2)}
.carte-off .ttl{display:block;font-size:22px;font-weight:900;letter-spacing:-.2px;line-height:1.2;margin:11px 0 9px;color:var(--gris)}
.carte-off .txt{display:block;font-size:13.5px;color:var(--gris2);line-height:1.6}

/* ═══ Le panneau des garanties : ce qu'Inrust ne fait pas ═══════════════ */
.garde{border:1px solid var(--rust-trait);background:var(--rust-voile);padding:30px 28px;margin-bottom:46px}
.garde .ttl{font-size:22px;font-weight:900;margin-bottom:10px}
.garde .txt{font-size:14.5px;color:var(--gris);line-height:1.65;max-width:900px}

/* ═══ Guide long : sommaire à gauche, article à droite ═════════════════ */
h1.h1-doc{font-size:50px;letter-spacing:-1.2px;line-height:1.08;max-width:880px}
.doc-chap{font-size:17.5px;color:var(--texte);line-height:1.7;max-width:760px;margin:0 0 10px}
.doc-maj{font-family:var(--mono);font-size:11.5px;letter-spacing:1.4px;color:var(--gris2);margin:0}
.doc{display:flex;gap:52px;flex-wrap:wrap;margin-top:40px}
.toc{flex:1 1 210px;min-width:0}
.toc .eb{font-family:var(--mono);font-size:10.5px;letter-spacing:2px;color:var(--gris2);padding-bottom:8px}
.toc a{display:block;padding:7px 0;font-size:13px;color:var(--gris);border-bottom:1px solid rgba(255,255,255,.06);transition:color .15s ease}
.toc a:hover,.toc a:focus-visible{color:var(--rust-clair)}
.art{flex:999 1 560px;min-width:0;max-width:760px}
.art h2{font-size:28px;font-weight:900;letter-spacing:-.4px;margin:42px 0 10px;scroll-margin-top:20px}
.art h3{font-size:16px;font-weight:700;margin:22px 0 5px}
.art p{font-size:15px;color:var(--gris);line-height:1.7;margin:0 0 12px}
/* .m : un bout de commande au fil du texte. */
.m{font-family:var(--mono);color:#FFB199}
.box{background:var(--carte);border:1px solid var(--trait2);border-left:2px solid var(--rust);padding:15px 18px;margin:14px 0 18px}
.cmd{display:block;font-family:var(--mono);font-size:13px;line-height:1.75;color:#FFB199;white-space:pre-wrap}
.cmds{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:9px 22px;align-items:baseline}
.cmds code{font-family:var(--mono);font-size:13px;color:#FFB199;white-space:nowrap}
.cmds span{font-size:13.5px;color:var(--gris);line-height:1.55}
/* L'encart ambre : le seul avertissement du site, et il ne porte qu'une chose
   (ne pas binder F7, qui est la touche du signalement du jeu). */
.avert{border:1px solid rgba(240,165,0,.35);background:rgba(240,165,0,.08);padding:16px 18px;margin:18px 0 8px}
.avert .ttl{font-size:14px;font-weight:700;color:#F0A500;margin-bottom:6px}
.avert p{margin:0;font-size:14px}
.avert strong{color:var(--texte)}
.hors{border:1px solid var(--trait4);background:var(--carte);padding:24px 24px 8px;margin:40px 0 0;scroll-margin-top:20px}
.hors .eb{font-family:var(--mono);font-size:10.5px;letter-spacing:2px;color:var(--gris2);margin-bottom:8px}
.hors .ttl{font-size:20px;font-weight:900;margin-bottom:9px}
.hors p{margin:0 0 4px;font-size:14.5px;color:var(--gris)}
.final{border:1px solid var(--rust-trait);background:var(--rust-voile);padding:26px 24px;margin:40px 0 0}
.final .ttl{font-size:20px;font-weight:900;margin-bottom:9px}
.final p{margin:0 0 16px;font-size:14.5px;color:var(--gris)}
.final .cta{display:inline-block}
.ensuite{margin-top:56px;border-top:1px solid var(--trait2);background:var(--panneau);padding:30px 44px}
.ensuite .eb{font-family:var(--mono);font-size:11px;letter-spacing:2.2px;color:var(--gris2);margin-bottom:18px}
.ensuite-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.suite .nm{display:block;font-size:17px;font-weight:900;letter-spacing:-.2px;line-height:1.3;transition:color .18s ease}
.suite:hover .nm,.suite:focus-visible .nm{color:var(--rust-clair)}

/* ═══ Accès : le propos à gauche, ce qu'on demande à droite ═══════════ */
.acc{display:flex;gap:56px;flex-wrap:wrap}
.acc-txt{flex:1 1 340px;min-width:0}
.acc-form{flex:1 1 400px;min-width:0}
.acc h1{font-size:46px;letter-spacing:-.9px;line-height:1.08;margin:14px 0 18px}
.acc-chap{font-size:16px;color:var(--gris);line-height:1.65;margin:0 0 26px}
.acc-bloc{border-top:1px solid var(--trait2);padding-top:22px}
.acc-bloc .ttl{font-size:15px;font-weight:900;margin-bottom:8px}
.acc-bloc p{font-size:13.5px;color:var(--gris);line-height:1.6;margin:0 0 18px}
.acc-bloc p:last-child{margin:0}
.panneau{border:1px solid var(--trait3);background:var(--panneau);padding:30px 28px}
.panneau>.ttl{font-size:15px;font-weight:900;margin-bottom:14px}
.etape{border-top:1px solid var(--trait2);padding:16px 0}
.etape .n{font-family:var(--mono);font-size:10.5px;letter-spacing:1.8px;color:var(--rust-clair)}
.etape .lbl{font-size:15px;font-weight:700;margin:7px 0 5px}
.hint{font-size:12.5px;color:var(--gris2);line-height:1.5}
.hint a{color:var(--rust-clair);text-decoration:underline;text-underline-offset:2px}
.hint-c{text-align:center;margin-top:14px}
/* Le seul lien du site à sortir vers le formulaire : il mérite sa taille. */
.sans-mail{border-top:1px solid var(--trait2);padding-top:16px;margin-bottom:22px}
.cta-grand{
  display:block;text-align:center;font-size:14.5px;font-weight:700;letter-spacing:.6px;
  color:var(--fond);background:var(--rust);border-radius:3px;padding:15px 20px;
  transition:background .18s ease;
}
.cta-grand:hover,.cta-grand:focus-visible{background:var(--rust-clair)}

/* ═══ Pages juridiques : trois documents qui se renvoient l'un à l'autre ═══ */
.onglets{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px}
.onglets a{
  font-family:var(--mono);font-size:11.5px;letter-spacing:1.4px;padding:9px 14px;
  color:var(--gris);border:1px solid var(--trait3);
  transition:color .18s ease,border-color .18s ease;
}
.onglets a:hover,.onglets a:focus-visible{color:var(--rust-clair);border-color:var(--rust-trait)}
.onglets a.on{color:var(--fond);background:var(--rust);border-color:var(--rust)}
h1.h1-jur{font-size:42px;font-weight:900;letter-spacing:-.9px;line-height:1.1;margin:0 0 10px}
.jur-maj{font-family:var(--mono);font-size:11.5px;letter-spacing:1.4px;color:var(--gris2);margin:0 0 20px}
/* La version française fait foi : à dire sur chaque langue, pas seulement en EN. */
.prevaut{
  background:var(--carte);border:1px solid var(--trait4);border-left:2px solid var(--rust);
  padding:13px 16px;margin-bottom:34px;font-size:13.5px;color:var(--gris);line-height:1.6;
}
.prevaut strong{color:var(--texte)}
.doc-jur{display:flex;gap:52px;flex-wrap:wrap}
.doc-jur .toc{flex:1 1 200px}
.doc-jur .toc .eb{border-bottom:1px solid var(--trait2);margin-bottom:6px}
.doc-jur .toc a{padding:6px 0;border-bottom:0}
.jur{flex:999 1 540px;min-width:0;max-width:700px}
.jur h2{font-size:20px;font-weight:900;margin:34px 0 10px;padding-top:20px;border-top:1px solid var(--trait2);scroll-margin-top:20px}
/* Le premier titre n'a rien au-dessus de lui : le filet et son espace ne
   servent qu'a separer DEUX sections. */
.jur h2:first-child{border-top:0;padding-top:0;margin-top:0}
.jur h3{font-size:15px;font-weight:700;margin:20px 0 6px}
.jur p{font-size:14.5px;color:var(--gris);line-height:1.7;margin:0 0 12px}
.jur ul,.jur ol{margin:0 0 14px 20px;color:var(--gris);font-size:14.5px;line-height:1.7}
.jur li{margin-bottom:6px}
.jur strong{color:var(--texte)}
.jur a{color:var(--rust-clair)}
/* .ph : ce qui n'est pas encore arrêté est signalé comme tel, pas inventé. */
.jur .ph{color:var(--rust-clair);font-family:var(--mono);font-size:13px}
.jur .tbl{overflow-x:auto;margin:0 0 14px}
.jur table{width:100%;border-collapse:collapse;font-size:13.5px;color:var(--gris);line-height:1.55}
.jur th,.jur td{text-align:left;vertical-align:top;padding:9px 10px;border-bottom:1px solid var(--trait2)}
.jur th{color:var(--texte);font-weight:700}

/* ═══ Pied de page ═════════════════════════════════════════════════════════ */
.pied{margin-top:auto;border-top:1px solid var(--trait2);background:var(--panneau);padding:30px 44px}
.pied-dsc{text-align:center;margin-bottom:22px}
.pied-dsc a{font-size:14.5px;font-weight:700;letter-spacing:.3px;color:var(--rust-clair)}
.faces{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.side{display:block;text-align:center}
.side .nm{display:block;font-size:16px;font-weight:900;letter-spacing:2px;transition:color .18s ease}
.side:hover .nm,.side:focus-visible .nm{color:var(--rust-clair)}
.side .rf{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:1.4px;color:var(--gris2);margin-top:5px}

.barre.pousse{margin-top:auto}
.barre{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:18px 44px;border-top:1px solid var(--trait)}
.barre-retour{font-family:var(--mono);font-size:11.5px;letter-spacing:1.5px;color:var(--gris2)}
.barre-retour:hover,.barre-retour:focus-visible{color:var(--rust-clair)}
.barre-liens{margin-left:auto;display:flex;gap:20px;font-family:var(--mono);font-size:11.5px;letter-spacing:1.4px}
.barre-liens a{color:var(--gris2)}
.barre-liens a:hover{color:var(--rust-clair)}
.barre-liens a.dsc{color:var(--rust-clair);font-size:11.5px}
.mention{
  margin:0;padding:0 44px 22px;font-size:11px;letter-spacing:.3px;
  font-family:var(--mono);line-height:1.6;color:var(--gris2);
}

/* ═══ Le hub ═══════════════════════════════════════════════════════════════ */
.hub{padding:28px 44px 30px}
.hub .hdr{margin:-28px -44px 0;padding:28px 44px 14px;border-bottom:none}
.hub-etat{font-family:var(--mono);font-size:11.5px;letter-spacing:2.4px;color:var(--rust-clair);text-transform:uppercase}
.hub-sous{font-family:var(--mono);font-size:11.5px;letter-spacing:1.6px;color:var(--gris2)}
.hub-wrap{flex-grow:1;display:flex;align-items:center;justify-content:center;padding:20px 0}
/* La marque pleine : montrée seulement quand l'hexagone passe en liste. */
.hub-marque{display:none;text-align:center;padding:14px 0 22px}
.hub-marque svg{width:136px;height:119px;display:block;margin:0 auto 16px}
.hub-marque .nom{font-size:36px;font-weight:900;letter-spacing:5px;line-height:1}
/* --w : la largeur de la scène, calculée plutôt que lue par une requête de
   conteneur. `container-type` faisait jouer à Chromium, au chargement, toutes
   les transitions de la scène depuis l'état SANS feuille de style (liens bleus
   qui virent au blanc, halos qui s'éteignent, Radar qui glisse). 88px = les
   marges latérales de .hub ; sous 961px la scène devient une liste à tailles fixes. */
.hub-scene{position:relative;width:100%;max-width:1040px;aspect-ratio:1040/680;--w:min(1040px,calc(100vw - 88px))}
.hub-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hub-svg .arete{transition:stroke .2s ease,stroke-width .2s ease}
.hub-svg .halo{opacity:0;transition:opacity .25s ease}
.hub-svg .fil{transition:stroke .2s ease,stroke-width .2s ease}
.hub-svg .noyau{transition:r .25s ease,fill .25s ease}

/* Les six liens, posés face à leur arête. Les positions sont celles de la
   maquette, en pourcentage de la scène : l'hexagone et les noms se redimen-
   sionnent ensemble, sans point de rupture intermédiaire. */
.hub-link{position:absolute;padding:4px;transition:opacity .22s ease,transform .22s ease}
.hub-link .rf{display:block;font-family:var(--mono);color:var(--gris2);font-size:clamp(9.5px,calc(var(--w) * .0106),11px);letter-spacing:.16em}
.hub-link .nm{display:block;font-weight:900;font-size:min(25px,calc(var(--w) * .024));letter-spacing:.14em;margin:.2em 0 .16em}
.hub-link .ds{display:block;color:var(--gris);line-height:1.5;font-size:clamp(11.5px,calc(var(--w) * .013),13.5px)}
.hub-link .nm,.hub-link .rf{transition:color .18s ease}
.hub-link:hover .nm,.hub-link:focus-visible .nm,
.hub-link:hover .rf,.hub-link:focus-visible .rf{color:var(--rust-clair)}
.hub-link:focus-visible{outline:2px solid var(--rust-clair);outline-offset:8px;border-radius:4px}

.l-radar{top:-4.41%;left:50%;transform:translateX(-50%);width:42.31%;text-align:center;transform-origin:50% 100%}
.l-serveurs{top:23.24%;left:0;width:26.15%;text-align:right;transform-origin:100% 50%}
.l-guides{top:23.24%;left:73.85%;width:26.15%;text-align:left;transform-origin:0 50%}
.l-news{top:62.94%;left:0;width:26.15%;text-align:right;transform-origin:100% 50%}
.l-clan{top:62.94%;left:73.85%;width:26.15%;text-align:left;transform-origin:0 50%}
.l-cmd{top:89.85%;left:50%;transform:translateX(-50%);width:32.69%;text-align:center;transform-origin:50% 0}

/* Le lien visé grossit un peu, en s'écartant de l'hexagone : l'origine de
   l'agrandissement est le bord tourné vers son arête, il ne mord donc jamais
   sur elle. Radar et Commande gardent leur centrage (translateX AVANT scale). */
.l-serveurs:hover,.l-serveurs:focus-visible,.l-guides:hover,.l-guides:focus-visible,
.l-news:hover,.l-news:focus-visible,.l-clan:hover,.l-clan:focus-visible{transform:scale(1.05)}
.l-radar:hover,.l-radar:focus-visible,.l-cmd:hover,.l-cmd:focus-visible{transform:translateX(-50%) scale(1.05)}

/* L'effet de visée : les cinq autres reculent, l'arête visée s'allume, le noyau
   s'ouvre. En CSS pur, sans une ligne de JavaScript. `:has()` manque avant
   Firefox 121 : le nom passe alors en orange, l'hexagone ne bouge pas. */
.hub-scene:has(.hub-link:hover) .hub-link:not(:hover),
.hub-scene:has(.hub-link:focus-visible) .hub-link:not(:focus-visible){opacity:.34}
.hub-scene:has(.hub-link:hover) .noyau,
.hub-scene:has(.hub-link:focus-visible) .noyau{r:50;fill:var(--rust-clair)}
.hub-scene:has(.l-radar:hover) .a-radar,.hub-scene:has(.l-radar:focus-visible) .a-radar,
.hub-scene:has(.l-serveurs:hover) .a-serveurs,.hub-scene:has(.l-serveurs:focus-visible) .a-serveurs,
.hub-scene:has(.l-guides:hover) .a-guides,.hub-scene:has(.l-guides:focus-visible) .a-guides,
.hub-scene:has(.l-clan:hover) .a-clan,.hub-scene:has(.l-clan:focus-visible) .a-clan,
.hub-scene:has(.l-cmd:hover) .a-cmd,.hub-scene:has(.l-cmd:focus-visible) .a-cmd,
.hub-scene:has(.l-news:hover) .a-news,.hub-scene:has(.l-news:focus-visible) .a-news{
  stroke:var(--rust-clair);stroke-width:6;
}
/* À 9 d'épaisseur, les bouts arrondis de l'arête visée débordaient sur ses deux
   voisines. Elle s'épaissit à peine ; c'est la lueur qui dit « c'est celle-ci ». */
.hub-scene:has(.l-radar:hover) .h-radar,.hub-scene:has(.l-radar:focus-visible) .h-radar,
.hub-scene:has(.l-serveurs:hover) .h-serveurs,.hub-scene:has(.l-serveurs:focus-visible) .h-serveurs,
.hub-scene:has(.l-guides:hover) .h-guides,.hub-scene:has(.l-guides:focus-visible) .h-guides,
.hub-scene:has(.l-clan:hover) .h-clan,.hub-scene:has(.l-clan:focus-visible) .h-clan,
.hub-scene:has(.l-cmd:hover) .h-cmd,.hub-scene:has(.l-cmd:focus-visible) .h-cmd,
.hub-scene:has(.l-news:hover) .h-news,.hub-scene:has(.l-news:focus-visible) .h-news{opacity:.75}
.hub-scene:has(.l-radar:hover) .f-radar,.hub-scene:has(.l-radar:focus-visible) .f-radar,
.hub-scene:has(.l-serveurs:hover) .f-serveurs,.hub-scene:has(.l-serveurs:focus-visible) .f-serveurs,
.hub-scene:has(.l-guides:hover) .f-guides,.hub-scene:has(.l-guides:focus-visible) .f-guides,
.hub-scene:has(.l-clan:hover) .f-clan,.hub-scene:has(.l-clan:focus-visible) .f-clan,
.hub-scene:has(.l-cmd:hover) .f-cmd,.hub-scene:has(.l-cmd:focus-visible) .f-cmd,
.hub-scene:has(.l-news:hover) .f-news,.hub-scene:has(.l-news:focus-visible) .f-news{
  stroke:var(--rust-clair);stroke-width:2.6;
}
.hub-pied{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;border-top:1px solid var(--trait);padding-top:18px}
/* Colonne de gauche du pied : la devise, puis la mention à la ligne. Elle garde une
   largeur bornée pour que les liens restent à droite au lieu de passer dessous. */
.hub-pied-g{flex:1 1 440px;min-width:0;max-width:820px}
.hub-pied .mention{padding:0;margin-top:8px}

/* ═══ Page de section ══════════════════════════════════════════════════════ */
.corps{padding:52px 44px 0;max-width:var(--large);width:100%;margin:0 auto}
.corps-doc{padding:54px 44px 44px;max-width:var(--large-doc);width:100%;margin:0 auto;flex-grow:1}
.titre{display:flex;gap:48px;flex-wrap:wrap;align-items:flex-end;margin-bottom:46px}
.titre-txt{flex:999 1 540px;min-width:0}
.fil{font-family:var(--mono);font-size:11.5px;letter-spacing:2.2px;color:var(--rust-clair)}
/* Retour en tête de page : le chemin du retour ne doit pas attendre le pied de page. */
.retour{
  display:inline-block;margin-bottom:22px;font-family:var(--mono);font-size:11.5px;font-weight:700;
  letter-spacing:1.5px;color:var(--fond);background:var(--rust);padding:8px 14px;border-radius:3px;
  transition:background .18s ease;
}
.retour:hover,.retour:focus-visible{background:var(--rust-clair)}
h1{font-size:56px;font-weight:900;letter-spacing:-1px;line-height:1.05;margin:14px 0 16px}
.chapeau{font-size:17px;color:var(--gris);line-height:1.6;margin:0;max-width:640px}
.titre-hx{flex:0 1 460px;min-width:280px}

/* Le mini hexagone en haut de page : le même menu que le hub, en plus petit. */
.hxm svg{width:100%;max-width:460px;height:auto;display:block;margin-left:auto;overflow:visible}
.hxm .v{stroke:var(--rust-fil2);stroke-width:2.5;stroke-linecap:round;transition:stroke .2s ease,stroke-width .2s ease}
.hxm .t{fill:var(--gris2);font-family:var(--mono);font-size:40px;letter-spacing:2px;transition:fill .18s ease}
.hxm .ld{stroke:var(--rust-fil);stroke-width:3.5;stroke-linecap:round;transition:stroke .2s ease,stroke-width .2s ease}
.hxm .core{transition:r .25s ease,fill .25s ease}
.hxm .h{stroke:var(--rust-clair);stroke-width:26;stroke-linecap:round;opacity:0;transition:opacity .25s ease}
.hxm a:hover .h,.hxm a:focus-visible .h{opacity:.7}
.hxm .on .v,.hxm a:hover .v,.hxm a:focus-visible .v{stroke:var(--rust-clair);stroke-width:4}
.hxm .on .t,.hxm a:hover .t,.hxm a:focus-visible .t{fill:var(--rust-clair)}
.hxm .on .ld,.hxm a:hover .ld,.hxm a:focus-visible .ld{stroke:var(--rust-clair);stroke-width:6}
.hxm svg:has(a:hover) .on:not(:hover) .v{stroke:var(--rust-fil2);stroke-width:2.5}
.hxm svg:has(a:hover) .on:not(:hover) .t{fill:var(--gris2)}
.hxm svg:has(a:hover) .on:not(:hover) .ld{stroke:var(--rust-fil);stroke-width:3.5}
.hxm svg:has(a:hover) .core,.hxm svg:has(a:focus-visible) .core{r:30;fill:var(--rust-clair)}
.hxm a:focus-visible{outline:none}

/* Les cartes : trois temps d'une boucle, trois promesses, trois étapes. */
.trois{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-bottom:46px}
.step{border:1px solid var(--trait2);padding:26px 24px;background:var(--carte);transition:border-color .2s ease}
.step:hover{border-color:rgba(232,82,42,.45)}
.step-fort{border-color:var(--rust-trait);background:var(--rust-voile)}
.step .num{font-family:var(--mono);font-size:11px;letter-spacing:1.8px;color:var(--rust-clair)}
.step .ttl{font-size:22px;font-weight:900;letter-spacing:-.2px;margin:10px 0 9px}
.step .txt{font-size:13.5px;color:var(--gris);line-height:1.6}

/* La capture d'écran : c'est la preuve, elle a droit à toute la largeur. */
.vue{margin:0 0 46px}
.vue img{display:block;width:100%;height:auto;border:1px solid var(--trait4);box-shadow:0 24px 60px rgba(0,0,0,.55)}
.vue figcaption{font-family:var(--mono);font-size:11.5px;letter-spacing:1.3px;color:var(--gris2);margin-top:12px}

/* Gratuit / abonnement / ce que ça ne fait pas. */
.colonnes{display:flex;gap:36px;flex-wrap:wrap;border-top:1px solid var(--trait2);padding-top:32px;margin-bottom:46px}
.colonnes>div{flex:1 1 330px}
.colonnes .ttl{font-size:21px;font-weight:900;margin-bottom:10px}
.colonnes .txt{font-size:14px;color:var(--gris);line-height:1.65}

/* ═══ Téléphone ════════════════════════════════════════════════════════════ */
@media (max-width:960px){
  /* Le hub devient une liste, dans l'ordre 01 → 06. */
  .hub-wrap{flex-direction:column;align-items:stretch}
  .hub-marque{display:block}
  .hub-scene{aspect-ratio:auto;max-width:none;display:flex;flex-direction:column}
  .hub-svg{display:none}
  .hub-link,.hub-link:hover,.hub-link:focus-visible{position:static;width:auto;text-align:left;transform:none;
            border-top:1px solid rgba(255,255,255,.09);padding:16px 0}
  .hub-link .rf{font-size:11px}
  .hub-link .nm{font-size:22px}
  .hub-link .ds{font-size:13.5px}
  .l-radar{order:1}.l-serveurs{order:2}.l-guides{order:3}
  .l-clan{order:4}.l-cmd{order:5}.l-news{order:6}
}
@media (max-width:640px){
  .hdr{padding:12px 16px;gap:10px}
  .hdr-fil,.hub-sous{display:none}
  /* ...sauf au pied du hub, où la devise coiffe la mention. */
  .hub-pied .hub-sous{display:inline}
  .hdr .cta{padding:9px 12px;font-size:12px}
  /* L'en-tête est déjà chargée : le lien Discord du pied suffit. */
  .dsc-h{display:none}
  .pgs{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 18px;
       padding:6px 16px 8px;border-bottom:1px solid var(--trait);background:rgba(7,9,12,.6)}
  .titre-hx{display:none}
  .corps{padding:28px 16px 0}
  .corps-doc{padding:28px 16px}
  .pied{padding:24px 16px}
  .barre{padding:16px}
  .mention{padding:0 16px 20px}
  h1{font-size:34px;letter-spacing:-.5px}
  .trois,.cartes,.ensuite-g{grid-template-columns:minmax(0,1fr)}
  .cmds{grid-template-columns:minmax(0,1fr);row-gap:2px}
  .cmds span{margin-bottom:10px}
  .ensuite{padding:24px 16px}
  h1.h1-doc{font-size:34px;letter-spacing:-.5px}
  .acc{gap:32px}
  h1.h1-jur{font-size:30px;letter-spacing:-.5px}
  .doc-jur{gap:28px}
  .faces{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px}
  .hub{padding:16px 20px 24px}
  .hub .hdr{margin:-16px -20px 0;padding:16px 20px 12px}
  .hub-marque{padding:26px 0 18px}
}

@media (prefers-reduced-motion:reduce){
  .hub-link,.hub-svg .arete,.hub-svg .fil,.hub-svg .noyau,.hub-svg .halo,.hxm .h,
  .hxm .v,.hxm .t,.hxm .core,.hxm .ld,.step,.dsc,.cta{transition:none}
}