/* ============================================================
   betaone.css : NOS écarts par rapport à la coque de David (Trypixel).
   La coque = site.css + pages.css + editorial.css, copiées telles quelles
   depuis maquettes\*-david\assets\ et JAMAIS modifiées : si David relivre,
   on remplace les trois fichiers et ce fichier-ci continue de s'appliquer
   par-dessus (il est chargé en dernier).
   Origine de chaque bloc : le <style> des maquettes accueil-v3, interieure-v1
   et faq-v1, plus ce que notre markdown et notre formulaire exigent.
   ============================================================ */

/* 1. Nos polices à la place de l'Arial système (décision typo actée). */
body{font-family:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif}
h1,h2,h3,h4,.brand,.button,.eyebrow,.section-label,.nav,.breadcrumbs,.feature-number,
.related-card strong,.footer h3,.page-kicker,.quick-links,.faq-group summary,
.mini-breadcrumb{font-family:'Archivo','Public Sans',system-ui,sans-serif}
h1,h2{letter-spacing:-.02em}

/* 2. Déroulant « Nos solutions » (maquette accueil v3, tranché PPs 09/09). */
#accueil.top{overflow:visible}                      /* le conteneur de David rognait le panneau */
.header{position:relative;z-index:40}
.nav-dd{position:relative}
.nav-dd__btn{background:none;border:0;color:inherit;font:inherit;padding-block:12px;display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.nav-dd__btn:hover,.nav-dd.open .nav-dd__btn{color:#fff}
#accueil .nav-dd__btn:hover,#accueil .nav-dd.open .nav-dd__btn{color:var(--brand-purple)}
.nav-dd__chev{width:11px;height:8px;transition:transform .15s}
.nav-dd.open .nav-dd__chev{transform:rotate(180deg)}
.nav-dd__panel{display:none;list-style:none;margin:0;padding:8px 0;position:absolute;top:calc(100% - 4px);left:-14px;min-width:230px;background:#1c1f20;border:1px solid #3a3e40;border-radius:10px;box-shadow:0 14px 34px #0009;z-index:30}
#accueil .nav-dd__panel{background:#fff;border-color:var(--line);box-shadow:0 14px 34px #0002}
.nav-dd.open .nav-dd__panel{display:block}
.nav-dd__panel a{display:block;padding:10px 18px;color:inherit;font-size:14px;white-space:nowrap}
.nav-dd__panel a:hover{color:#fff;background:#ffffff0d}
#accueil .nav-dd__panel a:hover{color:var(--brand-purple);background:#77267308}
.nav-dd__panel a[aria-current=page]{color:var(--brand-purple);font-weight:700}
/* mobile : dans le burger, le groupe est toujours déplié, ses pages en retrait */
@media(max-width:980px){
  .nav-dd__btn{display:none}
  .nav-dd__panel,#accueil .nav-dd__panel{display:block;position:static;background:none;border:0;box-shadow:none;padding:0;min-width:0}
  .nav-dd__panel::before{content:"Nos solutions";display:block;padding:8px 0 4px;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;opacity:.6}
  .nav-dd__panel a{padding:9px 0 9px 14px;border-left:2px solid currentColor;border-left-color:#0003}
}

/* 3. Accueil : les réglages que la maquette portait en style= inline. */
.hero .expertise-line{font-size:17px;color:#e6e9eb}
.hero .expertise-line em{font-style:normal;color:var(--brand-blue)}
.hero .art-caption{left:0;right:0;justify-content:center}
.hero-description br{display:inline}
@media(max-width:620px){.hero-description br{display:none}}   /* les 4 lignes forcées se replient sur téléphone */
/* Barre de confiance : chez David le 3e élément est une note grise, masquée sur téléphone.
   Chez nous c'est un argument à part entière (la sauvegarde qu'on peut montrer) :
   même couleur que les autres, et présent partout, un par ligne sur téléphone. */
.trust-item:last-child{color:inherit;font-size:inherit}
@media(max-width:980px){.trust-item:nth-child(3),.trust-item:last-child{display:flex}.trust-bar{grid-template-columns:1fr}}

/* 4. Fragment d'orbite : la figure entière du hero, posée derrière le bloc « En bref ».
      Elle vit dans la colonne du bloc, donc elle ne touche jamais le bord de la page.
      Décor : aria-hidden, aucun événement de souris, pas d'animation. */
.page-hero{position:relative}
.brief-col{position:relative;display:flex;align-items:center;justify-content:center}
.brief-col .page-brief{position:relative;z-index:1;width:100%}
.hero-orbit{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(104%,540px);height:auto;opacity:.9;pointer-events:none}
/* Les traits d'orbite de David sont portés par `.network .orbit`, jamais par `.orbit` seul :
   hors du hero d'accueil, le fragment doit porter ses propres traits. */
.hero-orbit .orbit{fill:none;stroke:#44494b;stroke-width:1}
.hero-orbit .orbit-dashed{stroke:#33383a;stroke-dasharray:3 7}
@media(max-width:900px){.hero-orbit{width:min(100%,420px);opacity:.55}}

/* 5. Bloc « En bref » : de l'information à la place d'une photo générée.
      Nourri par le front matter (enbref:), format que les moteurs IA citent tel quel. */
.page-brief{border:1px solid #ffffff26;border-radius:var(--radius);padding:26px 28px;background:#ffffff08}
.page-brief .brief-title{margin:0 0 16px;font-family:'Archivo',sans-serif;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-blue)}
.page-brief dl{margin:0}
.page-brief dl > div{display:grid;grid-template-columns:104px minmax(0,1fr);gap:18px;padding:13px 0;border-top:1px solid #ffffff1a}
.page-brief dl > div:first-child{border-top:0;padding-top:0}
.page-brief dt{font-family:'Archivo',sans-serif;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:#9aa0a4;padding-top:2px}
.page-brief dd{margin:0;font-size:14.5px;line-height:1.6;color:#e7eaec}
@media(max-width:620px){.page-brief dl > div{grid-template-columns:1fr;gap:5px}}
/* Page sans bloc « En bref » : le hero se rabat sur une seule colonne. */
.page-hero-grid--seule{grid-template-columns:minmax(0,1fr)}
.page-hero-grid--seule p{max-width:60ch}

/* 6. Chapeau de page : hors de la grille de lecture, large et en italique. */
.page-lead .prose{max-width:80ch}
.page-lead .prose p{font-style:italic;font-size:19px;line-height:1.62;color:#4a5157;margin:0 0 14px}
.page-lead .prose p:last-child{margin-bottom:0}
.page-lead .prose .button{margin-top:10px}

/* 7. Respiration resserrée : l'espacement de David était calculé pour des titres de 43 px,
      nos titres de section en font 20 (80 px + 65 px s'additionnaient). */
.content-section{padding:26px 0}
.reading-layout{padding:22px 0 26px}
@media(max-width:900px){.content-section{padding:18px 0}}

/* 8. Colonne de gauche : le titre de section reste un vrai <h2> (les moteurs IA s'en
      servent pour situer un passage), rendu petit : ni pavé de 43 px, ni numéro, ni barre. */
.content-section h2.section-label,
.reading-layout h2.section-label{font-size:20px;line-height:1.3;font-weight:600;letter-spacing:-.005em;text-transform:none;color:var(--ink);margin:0}
@media(max-width:900px){.content-section h2.section-label,.reading-layout h2.section-label{font-size:19px}}

/* 9. Panneau violet : sa liste est une grille de 3 colonnes prévue pour des items courts.
      Nos cas sont des phrases : une colonne. */
.usecase-list{grid-template-columns:1fr;gap:18px;list-style:none;margin:0;padding:0}
.usecase-list li{line-height:1.7}
/* .prose est nécessaire : sans lui la règle fait jeu égal (0,2,2) avec
   `.prose li > strong:first-child` plus bas, qui l'emporte par l'ordre. */
.usecase-panel .prose .usecase-list li strong{color:#fff}
.usecase-panel .prose{color:#eddcec}
.usecase-panel .prose p{margin:0 0 14px}

/* 10. Prose : ce que notre markdown produit et que la coque ne stylait pas.
       Motif des puces « **Libellé.** Phrase. », encadrés (blockquote), tableaux de la
       page vie privée, date de mise à jour des pages juridiques. */
.prose ul{list-style:none;padding-left:0}
.prose ul li{position:relative;padding-left:22px;margin-top:12px}
.prose ul li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:2px;background:var(--brand-blue)}
.prose li > strong:first-child{color:var(--ink)}
.prose ol li{margin-top:8px}
.prose a:not(.button){color:var(--brand-purple);text-decoration:underline;text-underline-offset:3px}
.prose a:not(.button):hover{color:var(--brand-blue)}
.prose blockquote{margin:26px 0;padding:20px 24px;background:var(--brand-blue-soft);border-left:2px solid var(--brand-blue);border-radius:0 9px 9px 0;max-width:74ch}
.prose blockquote p{margin:0;color:var(--ink)}
.prose blockquote p + p{margin-top:12px}
.prose table{border-collapse:collapse;width:100%;margin:22px 0;font-size:15px}
.prose th,.prose td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--line)}
.prose th{font-family:'Archivo',sans-serif;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-purple);border-bottom:2px solid var(--brand-purple)}
.prose em.maj{display:block;color:#68717a;font-size:14px;margin:0 0 10px}
.prose .button{text-decoration:none;margin:4px 0 20px}
button.button{font:inherit;cursor:pointer}
@media(max-width:620px){.prose table{display:block;overflow-x:auto}}

/* 11. Accueil, sous le hero : nos motifs (index des services en filets, souveraineté /
       franchise) posés sur les jetons de David. */
.services-index{padding:64px 0 40px}
.services-index .section-heading p{max-width:66ch}
.svc{border-top:1px solid var(--line);margin-top:30px}
.svc__row{display:grid;grid-template-columns:34px minmax(300px,.8fr) 2fr auto;gap:26px;align-items:center;padding:22px 14px 22px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;transition:background .16s,padding-left .16s}
.svc__row:hover{background:var(--brand-purple-soft);padding-left:14px}
.svc__ico{width:34px;height:34px;display:block;color:var(--brand-blue);transition:color .16s}
.svc__row:hover .svc__ico{color:var(--brand-purple)}
.svc__name{font-family:'Archivo',sans-serif;font-weight:600;font-size:19px;letter-spacing:-.014em;transition:color .16s}
.svc__row:hover .svc__name{color:var(--brand-purple)}
.svc__desc{color:#646c73;font-size:15px;line-height:1.6}
.svc__go{color:var(--brand-purple);font-size:20px;line-height:1;transition:transform .16s}
.svc__row:hover .svc__go{transform:translateX(5px)}
/* Téléphone : la description passe sous le nom, la flèche reste sur la première ligne
   (sans grid-row explicite, l'auto-placement la renvoyait seule sur une troisième ligne). */
@media(max-width:1000px){.svc__row{grid-template-columns:34px 1fr auto;row-gap:8px}.svc__ico,.svc__name,.svc__go{grid-row:1}.svc__go{grid-column:3}.svc__desc{grid-column:2/-1;grid-row:2}}

.brief-home{padding:34px 0 54px}
.brief-home .pillar h3{font-family:'Archivo',sans-serif;font-weight:600}

.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;padding:56px 0 78px;border-top:1px solid var(--line)}
.split h2{font-size:29px;letter-spacing:-.8px;font-weight:500;margin:10px 0 18px}
.split p{color:#4b555e;max-width:52ch;margin:0}
.split p + p{margin-top:14px}
.split a.inline{color:var(--brand-purple);text-decoration:underline;text-underline-offset:3px}
.split a.inline:hover{color:var(--brand-blue)}
.split .eyebrow{color:var(--brand-blue)}
.sovereign{border-left:2px solid var(--brand-blue);padding-left:26px}
.refuse{border-left:2px solid var(--brand-purple);padding-left:26px}
.refuse dl{margin:18px 0 0}
.refuse dt{font-family:'Archivo',sans-serif;font-weight:600;margin-top:18px;color:var(--ink)}
.refuse dt:first-of-type{margin-top:0}
.refuse dd{margin:5px 0 0;color:#4b555e;max-width:50ch}
.split__go{margin-top:18px}
@media(max-width:1000px){.split{grid-template-columns:1fr;gap:48px}}

/* 12. Bande « Parlons-en » (le .contact.compact de David) : notre texte peut faire
       trois lignes, on aligne le bouton au centre plutôt qu'en haut. */
.contact.compact .wrap{align-items:center}
.contact.compact p + p{margin-top:12px}

/* 13. Colophon : nos mentions, logo en variante nuit posé sur le fond sombre.
       La pastille blanche de David disparaît, elle n'existait que faute de variante. */
.footer-legal .bce{color:var(--muted)}
.footer .brand{background:none;padding:0;border-radius:0}

/* Logo (en-tête et colophon) : le dessin occupe EXACTEMENT son viewBox (0 0 2095 416), et le
   <svg> comme le <symbol> masquent leur débordement par défaut. Posé à une position
   fractionnaire, Chrome arrondit la découpe au pixel et rogne le bas des lettres rondes
   (signalé PPs 28/09). Les DEUX découpes sont à lever : le <svg> seul ne suffit pas (mesuré). */
.brand-logo,#logo,#logo-night{overflow:visible}

/* « Et pour aller plus loin » en une ligne : titre à gauche, 3 cartes à droite
   (validé PPs 28/09, toutes les pages). Sous 1400 px, retour à l'empilement de David
   (titre puis cartes) : mesuré, à 1280 px « Support sur site et matériel » passe déjà
   sur 2 lignes, à 1101 px sur 3. */
@media (min-width:1400px){
  .related{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:48px}
  .related h2{margin:0;white-space:nowrap}
  .related .related-grid{margin-top:0}
}

/* 14. FAQ (maquette faq-v1, validée PPs 12/09). */
.editorial-heading h1{letter-spacing:-.02em;font-weight:600}
.editorial-heading .lead{font-style:italic}
.faq-themes{margin-top:0;padding:34px 0 30px}
.faq-group{scroll-margin-top:24px}
.faq-group>h2{font-weight:600;letter-spacing:-.01em}
.faq-group summary{font-weight:600}
.faq-group summary:hover{color:var(--brand-purple)}
.faq-group .answer{color:#4a5157;font-size:15.5px}
.faq-group .answer p{margin:0 0 12px}
.faq-group .answer p:last-child{margin-bottom:0}

/* 15. Formulaire de contact (partial formulaire-contact.html), jetons de David.
       Aucun cookie, aucune session, aucun tiers : voir le partial. */
.form{margin:26px 0 8px}
.form__legend{color:#68717a;font-size:14px;margin:0 0 22px}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.form__field{display:block;margin:0 0 20px}
.form__field label{display:block;font-family:'Archivo',sans-serif;font-weight:600;font-size:15px;color:var(--ink);margin-bottom:7px}
.form__field label abbr{color:var(--brand-purple);text-decoration:none}
.form__hint{display:block;font-size:14px;color:#68717a;margin:-3px 0 8px;max-width:62ch;line-height:1.5}
.form input,.form textarea,.form select{display:block;width:100%;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:7px;padding:11px 13px;transition:border-color .16s,box-shadow .16s}
.form textarea{resize:vertical;min-height:84px;line-height:1.55}
.form input:hover,.form textarea:hover,.form select:hover{border-color:#9aa0a4}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--brand-blue);box-shadow:0 0 0 3px var(--brand-blue-soft)}
/* Le champ vide n'est pas signalé en rouge tant que rien n'a été tenté. */
.form input:user-invalid,.form textarea:user-invalid{border-color:var(--brand-purple)}
/* Champ piège : hors écran plutôt que display:none, que certains robots repèrent. */
.form__pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__send{margin:6px 0 0}
.form__legal{margin:22px 0 0;font-size:14px;color:#68717a;max-width:74ch;line-height:1.55}
@media(max-width:620px){.form__grid{grid-template-columns:1fr}}

/* 16. Focus visible partout, fond clair comme fond sombre. */
:focus-visible{outline:2px solid var(--brand-blue);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}

/* ===== Animations dans le corps des pages (shortcode animation) =====
   Fond = celui du hero, halo mauve porté par la figure ; ni cadre ni liseré (règle PPs). */
.animation{background:var(--dark);border-radius:var(--radius);padding:10px 6px 0;margin:30px 0 6px;max-width:640px;overflow:hidden}

/* ===== Télébackup animé : bloc destiné à betaone.css ===== */
.tb{--az:#4db8e8;--az-deep:#229bd2;--mv:#c265bc;--mv-deep:#781e73;--tx:#e6e8e9;--dim:#8d9498;--ln:#343a3d;--card:#1d2124;
  position:relative;background:transparent}
.tb::before{content:"";position:absolute;inset:-6% -4%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,rgba(120,30,115,.23),rgba(34,155,210,0) 62%)}
.tb>*{position:relative}.tb>.tb-corner{position:absolute}
.tb svg{display:block;width:100%;height:auto}
.tb text{font-family:'Archivo','Public Sans',system-ui,sans-serif}
.tb .mono,.tb .mono text,.tb text.mono,.tb tspan.mono{font-family:Consolas,'Cascadia Code',monospace;white-space:pre}
.tb-corner{position:absolute;top:14px;font:600 10.5px/1.3 'Archivo',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.tb-corner--l{left:16px}.tb-corner--r{right:16px;text-align:right}

/* décor */
.tb .box{fill:#1f2427;stroke:var(--az);stroke-width:1.5}
.tb .bay{fill:#15181a;stroke:#3f4a50;stroke-width:1}
.tb .led{fill:#3c4448}
.tb .nas-led{animation:tb-led 1.6s steps(1) infinite}
.tb .nas-led+.nas-led{animation-delay:-.5s}
.tb .rack-led.busy{animation:tb-led .35s steps(1) infinite}
.tb .cable{stroke:#3f4a50;stroke-width:2}
.tb .cap{font-size:10.5px;fill:var(--dim);letter-spacing:.07em;text-transform:uppercase}

/* document */
.tb .doc-bg{fill:var(--card);stroke:#3a4145;stroke-width:1.2}
.tb .doc-head{fill:#262b2f}
.tb .doc-name{font-size:11.5px;fill:var(--az)}
.tb .doc-line{font-size:11px;fill:var(--tx);transition:fill .5s}
.tb .doc.enc .doc-line{fill:var(--mv)}
.tb .doc.enc .doc-bg{stroke:var(--mv);transition:stroke .5s}
.tb .doc{transform-box:view-box;transform-origin:110px 160px;transition:transform .7s cubic-bezier(.6,0,.3,1),opacity .7s}
.tb .doc.go{transform:translate(118px,140px) scale(.12);opacity:0}
.tb .doc.hide{transition:none;opacity:0}
.tb .doc-lock{transform-box:fill-box;transform-origin:center;transition:transform .45s cubic-bezier(.3,1.6,.5,1),opacity .2s}
.tb .doc:not(.enc) .doc-lock{transform:translateY(-14px) scale(.4);opacity:0}

/* verrou (réutilisé) */
.tb .lk-mv{color:var(--mv)}.tb .lk-wh{color:#fff}

/* tunnel */
.tb .tube{fill:rgba(34,155,210,.07);stroke:var(--az);stroke-width:1.6;transition:fill .5s}
.tb .tube-glow{fill:none;stroke:var(--az);stroke-width:10;opacity:.0;filter:blur(6px);transition:opacity .5s}
.tb .tunnel.on .tube{fill:rgba(34,155,210,.16)}
.tb .tunnel.on .tube-glow{opacity:.45}
.tb .tube-flow{stroke:var(--az);stroke-width:1.4;stroke-dasharray:3 9;opacity:.7;animation:tb-flow .9s linear infinite}
.tb .tun-label{font-size:10.5px;font-weight:600;fill:var(--az);letter-spacing:.1em;text-transform:uppercase}

/* paquet */
.tb .pk{opacity:0}
.tb .pk-body{fill:var(--mv);filter:drop-shadow(0 0 8px rgba(194,101,188,.8))}
.tb .pk-halo{fill:none;stroke:var(--az);stroke-width:1.4;opacity:.9}

/* baie */
.tb .slot{fill:#15181a;stroke:#3a4145;stroke-width:1;transition:fill .5s,stroke .5s}
.tb .slot-txt{font-size:9.5px;fill:transparent;transition:fill .5s}
.tb .slot-lk{opacity:0;transition:opacity .4s}
.tb .slot.full{fill:rgba(194,101,188,.18);stroke:var(--mv)}
.tb .s.full .slot{fill:rgba(194,101,188,.18);stroke:var(--mv)}
.tb .s.full .slot-txt{fill:#b98ab6}
.tb .s.full .slot-lk{opacity:1}
.tb .s.new .slot{fill:rgba(194,101,188,.42)}

/* étapes */
.tb-steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #ffffff1c}
.tb-step{padding:13px 16px 15px;border-left:1px solid #ffffff1c;opacity:.42;transition:opacity .4s}
.tb-step:first-child{border-left:0}
.tb-step .n{font:12px Consolas,monospace;color:var(--dim)}
.tb-step .t{font:600 14px/1.25 'Archivo',sans-serif;color:#fff;margin-top:3px}
.tb-step .s{font-size:12.5px;line-height:1.4;color:#a9aeb1;margin-top:3px}
.tb-step.on{opacity:1}
.tb-step.on .n{color:var(--mv)}
.tb-step:nth-child(2).on .n{color:var(--az)}

@keyframes tb-led{0%{fill:var(--az)}50%{fill:#3c4448}}
@keyframes tb-flow{to{stroke-dashoffset:-12}}
@media (max-width:560px){.tb-corner{font-size:9px;letter-spacing:.1em;top:11px}.tb-corner--l{left:12px}.tb-corner--r{right:12px}.tb-be{display:none}.tb-step{padding:10px}.tb-step .s{display:none}.tb-step .t{font-size:12.5px}}
@media (prefers-reduced-motion:reduce){.tb *{animation:none!important;transition:none!important}}

/* ===== Réseaux animé : bloc destiné à betaone.css ===== */
.rz{--az:#4db8e8;--az-deep:#229bd2;--mv:#c265bc;--mv-deep:#781e73;--tx:#e6e8e9;--dim:#8d9498;--ln:#3f4a50;
  position:relative;background:transparent}
.rz::before{content:"";position:absolute;inset:-6% -4%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,rgba(120,30,115,.23),rgba(34,155,210,0) 62%)}
.rz>*{position:relative}
.rz svg{display:block;width:100%;height:auto}
.rz text{font-family:'Archivo','Public Sans',system-ui,sans-serif}
/* décor */
.rz .wire{stroke:var(--ln);stroke-width:2;fill:none}
.rz .ico{fill:none;stroke:#cfd4d6;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.rz .cap{font-size:10.5px;fill:var(--dim);letter-spacing:.07em;text-transform:uppercase}
.rz .zone{fill:rgba(34,155,210,.05);stroke:var(--az-deep);stroke-width:1.2;stroke-dasharray:4 5;transition:fill .4s,stroke .4s}
.rz .zone-t{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;fill:var(--az)}
.rz .z.alert .zone{fill:rgba(194,101,188,.10);stroke:var(--mv)}
.rz .z.alert .zone-t{fill:var(--mv)}
/* pare-feu */
.rz .fw-box{fill:#1f2427;stroke:var(--az);stroke-width:1.6;transition:stroke .25s,fill .25s}
.rz .fw.deny .fw-box{stroke:var(--mv);fill:rgba(194,101,188,.16)}
.rz .fw.pass .fw-box{fill:rgba(34,155,210,.16)}
.rz .fw-t{font-size:11px;font-weight:700;fill:#fff;letter-spacing:.1em}
.rz .fw-shield{fill:rgba(255,255,255,.04);stroke:#fff;stroke-width:.8;opacity:.28;stroke-linejoin:round}
.rz .deny-x{stroke:var(--mv);stroke-width:3;stroke-linecap:round;opacity:0;transition:opacity .2s}
.rz .deny-x.on{opacity:1}
/* tunnel */
.rz .tube{fill:none;stroke:rgba(34,155,210,.18);stroke-width:14;stroke-linecap:round;transition:stroke .4s}
.rz .tube-edge{fill:none;stroke:var(--az);stroke-width:1;opacity:.55}
.rz .tube-flow{fill:none;stroke:var(--az);stroke-width:1.4;stroke-dasharray:3 9;opacity:.7;animation:rz-flow .9s linear infinite}
.rz .tunnel.on .tube{stroke:rgba(34,155,210,.34)}
.rz .tun-label{font-size:10.5px;font-weight:600;fill:var(--az);letter-spacing:.1em;text-transform:uppercase}
/* appareil compromis */
.rz .cam.bad .ico{stroke:var(--mv)}
.rz .ring{fill:none;stroke:var(--mv);stroke-width:1.5;opacity:0}
/* paquets */
.rz .pk{fill:var(--az);filter:drop-shadow(0 0 6px rgba(77,184,232,.9))}
.rz .pk.bad{fill:var(--mv);filter:drop-shadow(0 0 6px rgba(194,101,188,.9))}
.rz .cap-pk rect{fill:var(--az-deep);filter:drop-shadow(0 0 6px rgba(77,184,232,.9))}
.rz .lk-wh{color:#fff}
/* étapes */
.rz-steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #ffffff1c}
.rz-step{padding:13px 16px 15px;border-left:1px solid #ffffff1c;opacity:.42;transition:opacity .4s}
.rz-step:first-child{border-left:0}
.rz-step .n{font:12px Consolas,monospace;color:var(--dim)}
.rz-step .t{font:600 14px/1.25 'Archivo',sans-serif;color:#fff;margin-top:3px}
.rz-step .s{font-size:12.5px;line-height:1.4;color:#a9aeb1;margin-top:3px}
.rz-step.on{opacity:1}.rz-step.on .n{color:var(--az)}
@keyframes rz-flow{to{stroke-dashoffset:-12}}
@media (max-width:560px){.rz-step{padding:10px}.rz-step .s{display:none}.rz-step .t{font-size:12.5px}}
@media (prefers-reduced-motion:reduce){.rz *{animation:none!important;transition:none!important}}

/* ===== Hébergement animé : trois niveaux de sauvegarde, au choix ===== */
.hb{--az:#4db8e8;--az-deep:#229bd2;--mv:#c265bc;--dim:#8d9498;position:relative;background:transparent}
.hb::before{content:"";position:absolute;inset:-6% -4%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,rgba(120,30,115,.23),rgba(34,155,210,0) 62%)}
.hb>*{position:relative}
.hb svg{display:block;width:100%;height:auto}
.hb text{font-family:'Archivo','Public Sans',system-ui,sans-serif}
.hb .dc-box{fill:rgba(34,155,210,.05);stroke:var(--az-deep);stroke-width:1.2;stroke-dasharray:4 5;transition:opacity .5s}
.hb .dc-t{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;fill:var(--az);transition:opacity .5s}
.hb .dc.far .dc-box,.hb .dc.far .dc-t{opacity:.3}
.hb .cap{font-size:10.5px;fill:var(--dim);letter-spacing:.07em;text-transform:uppercase}
.hb .srv{fill:#1f2427;stroke:#cfd4d6;stroke-width:1.5}
.hb .srv-l{stroke:#cfd4d6;stroke-width:1.5;stroke-linecap:round}
.hb .led{fill:#3c4448}.hb .led.on{fill:var(--az)}
.hb #hbRep.on .led{fill:var(--az);animation:hb-led 1.6s steps(1) infinite}
.hb .slot{fill:#15181a;stroke:#3f4a50;stroke-width:1;transition:fill .5s,stroke .5s}
.hb .slot.full{fill:rgba(194,101,188,.18);stroke:var(--mv)}
.hb .slot.new{fill:rgba(194,101,188,.45)}
.hb .far-item{opacity:.12;transition:opacity .6s}
.hb .far-item.on{opacity:1}
.hb .link-l{stroke:#3f4a50;stroke-width:2;transition:stroke .3s}
.hb .link.on .link-l{stroke:var(--az)}
.hb .link-t{font-size:10px;fill:var(--dim);letter-spacing:.07em;text-transform:uppercase}
.hb .sync{fill:none;stroke:var(--az);stroke-width:1.4;stroke-dasharray:3 9;opacity:.75;animation:hb-flow .9s linear infinite}
.hb .hb-cap rect{fill:var(--mv);filter:drop-shadow(0 0 6px rgba(194,101,188,.9))}
.hb-steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #ffffff1c}
.hb-step{padding:13px 16px 15px;border-left:1px solid #ffffff1c;opacity:.42;transition:opacity .4s}
.hb-step:first-child{border-left:0}
.hb-step .n{font:12px Consolas,monospace;color:var(--dim)}
.hb-step .t{font:600 14px/1.25 'Archivo',sans-serif;color:#fff;margin-top:3px}
.hb-step .s{font-size:12.5px;line-height:1.4;color:#a9aeb1;margin-top:3px}
.hb-step.on{opacity:1}.hb-step.on .n{color:var(--az)}
@keyframes hb-led{0%{fill:var(--az)}50%{fill:#3c4448}}
@keyframes hb-flow{to{stroke-dashoffset:-12}}
@media (max-width:560px){.hb-step{padding:10px}.hb-step .s{display:none}.hb-step .t{font-size:12.5px}}
@media (prefers-reduced-motion:reduce){.hb *{animation:none!important;transition:none!important}.hb .far-item{opacity:1}.hb .dc.far .dc-box,.hb .dc.far .dc-t{opacity:1}}

/* ===== Accueil : animation de la figure orbitale (destiné à betaone.css) ===== */
.network .fx-pk{fill:#4db8e8;filter:drop-shadow(0 0 4px rgba(77,184,232,.9))}
.network .fx-cap rect{fill:#c265bc;filter:drop-shadow(0 0 6px rgba(194,101,188,.9))}
.network .fx-cap{color:#fff}
.network .fx-vpn rect{fill:#229bd2;filter:drop-shadow(0 0 6px rgba(77,184,232,.9))}
.network .fx-trail{stroke:#c265bc;stroke-width:1.2;stroke-dasharray:3 4;fill:none;opacity:0;transition:opacity .4s}
.network .fx-trail.on{opacity:.8}
.network .fx-ring{fill:none;stroke:#c265bc;stroke-width:1.5;opacity:0}
.network .fx-core{fill:none;stroke:#c265bc;stroke-width:2;opacity:0}
.network .fx-hl{stroke:#4db8e8;stroke-width:2;fill:none;opacity:0;transition:opacity .25s;filter:drop-shadow(0 0 4px rgba(77,184,232,.8))}
.network .fx-hl.on{opacity:1}
.network .fx-tile>rect{transition:stroke .3s}
.network .fx-tile.hit>rect{stroke:#4db8e8}
.network .fx-tile.hit-mv>rect{stroke:#c265bc}
.network .fx-tile{cursor:default}
@media (prefers-reduced-motion:reduce){.network .fx{display:none}}