.ocw-cls-1 {
        fill: url(#ocw_Dégradé_sans_nom_3);
      }
      .ocw-cls-2 {
        fill: url(#ocw_Dégradé_sans_nom_3-3);
      }
      .ocw-cls-3 {
        fill: url(#ocw_Dégradé_sans_nom_3-9);
      }
      .ocw-cls-4 {
        fill: url(#ocw_Dégradé_sans_nom_3-8);
      }
      .ocw-cls-5 {
        fill: url(#ocw_Dégradé_sans_nom_3-7);
      }
      .ocw-cls-6 {
        fill: url(#ocw_Dégradé_sans_nom_3-2);
      }
      .ocw-cls-7 {
        fill: url(#ocw_Dégradé_sans_nom_3-5);
      }
      .ocw-cls-8 {
        fill: url(#ocw_Dégradé_sans_nom_3-6);
      }
      .ocw-cls-9 {
        fill: url(#ocw_Dégradé_sans_nom_3-4);
      }
    
  /* ==========================================================================
     TYPOGRAPHIE — public prioritaire : les developpeurs
     Grotesque moderne (Inter) pour la lecture, chasse fixe (JetBrains Mono)
     pour tout ce qui est technique : sur-titres, commandes, noms de
     technologies, chiffres, etiquettes. Repli systeme si Google Fonts est
     injoignable.
     ========================================================================== */
  body{font-feature-settings:"cv05" 1, "ss01" 1; letter-spacing:-0.006em;}
  h1,h2,h3,h4{letter-spacing:-0.032em;}
  code, kbd, samp, pre, .mono{font-family:var(--font-mono);}

  /* sur-titres de rubrique : petites capitales espacees, chasse fixe */
  .eyebrow, .rm-eyebrow, .modal-eyebrow, .paas-tag, .rm-date, .res-meta,
  .uc-sep, .navdrop-menu-head, .foot-col h4, .wc-tag, .tc-head, .th-cat,
  .pil-tag, .pil-lab, .pil-when, .uc-photo-tag, .price-badge, .hs-label,
  .regdrop-head, .regdrop-item .reg-state, .console-kicker, .ihm-kicker{
    font-family:var(--font-mono) !important; font-weight:500 !important;}

  /* chiffres, compteurs et etapes : chasse fixe, chiffres tabulaires */
  .hs-value, .jn-num, .ab-n, .jn-url, .cb-bar em, .jn-bar em, .pil-cta-note em,
  .foot-inst, .stat-v, .ec-year, .rm-date{
    font-family:var(--font-mono); font-variant-numeric:tabular-nums;}

  /* noms de technologies et etiquettes techniques */
  .th-chip, .tc-list li, .fc-chip, .pil-name, .plat-tag, .dev-k, .dev-cmd{
    font-family:var(--font-mono);}
  .pil-name{letter-spacing:-0.03em; font-weight:600;}

  /* boutons et liens de navigation : grotesque, jamais de chasse fixe */
  .btn, .navdrop-label > a, .langdrop-toggle, .regdrop-toggle{
    font-family:var(--font-main);}

  /* arabe, kabyle et tifinagh : la chasse fixe latine ne couvre pas ces ecritures */
  html[dir="rtl"]{--font-mono:'Cairo','Inter',Arial,sans-serif;}
  html[lang="tz"]{--font-mono:'Noto Sans Tifinagh','Inter',Arial,sans-serif;}
  html[dir="rtl"] body, html[lang="tz"] body{letter-spacing:normal;}

  /* ==========================================================================
     ACCUEIL — une seule grammaire de rubrique, celle du bloc Securite
     Meme respiration, meme filet de separation, meme traitement de sur-titre,
     de titre et de corps. Aucune bande de couleur, aucun encadre.
     ========================================================================== */
  main > section{padding:var(--sec-gap) 0; background:var(--bg);
    border-top:1px solid var(--border); border-bottom:none;}
  main > section.neo-banner{padding:0; border-top:none;}
  main > section > .wrap{max-width:1180px; margin:0 auto; padding:0 40px;}
  main > section.finalcta{padding:0 0 var(--sec-gap); border-top:none;}
  .finalcta-inner{border-top:1px solid var(--border);}
  main > section.about-contact{padding-bottom:clamp(40px,5vw,64px);}
  .about-contact .about-sub{padding-top:0; margin-top:0; border-top:none;}
  .about.about-last{padding-top:var(--sec-gap);}
  .about-last .sec-head{margin:0 0 clamp(44px,5vw,72px);}

  /* sur-titre, titre, corps : identiques d'une rubrique a l'autre */
  .sec-head{max-width:820px; margin:0 0 clamp(44px,5vw,72px); text-align:start;}
  .sec-head h2{font-size:clamp(30px,3.6vw,50px); margin:16px 0 20px; max-width:22ch;}
  .sec-head p{max-width:62ch;}
  .sec-head::after{content:""; display:block; width:64px; height:1px;
    margin-top:clamp(28px,3vw,40px);
    background:repeating-linear-gradient(90deg, var(--accent) 0 10px, transparent 10px 16px); opacity:.7;}
  .uc-tabs, .adv-tabs{justify-content:flex-start;}

  /* ==========================================================================
     ACCROCHE — session en ligne de commande
     ========================================================================== */

  /* ==========================================================================
     ACCROCHE — deux colonnes : arguments a gauche, session terminal a droite
     ========================================================================== */
  .neo-bg{grid-template-columns:1fr;}
  

  /* ==========================================================================
     POURQUOI ONECLOUD — blocs pleine largeur alternes
     Sur-titre en petites capitales espacees, titre court, paragraphe bref,
     visuel anime a droite puis a gauche. Separateur : motif de lignes fines.
     ========================================================================== */
  .wb-list{display:flex; flex-direction:column;}
  .wb{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
    gap:clamp(32px,6vw,88px); align-items:center;
    padding:clamp(44px,5vw,72px) 0;
    border-top:1px solid transparent;
    border-image:repeating-linear-gradient(90deg, var(--border) 0 8px, transparent 8px 14px) 1;
    opacity:0; transform:translateY(18px);
    transition:opacity .7s ease, transform .7s ease;}
  .wb.in-view{opacity:1; transform:none;}
  .wb:nth-child(even) .wb-txt{grid-column:2;}
  .wb:nth-child(even) .wb-fig{grid-column:1; grid-row:1;}
  .wb-eyebrow{display:inline-flex; align-items:center; gap:12px; margin-bottom:16px;
    font-family:var(--font-mono); font-size:11.5px; font-weight:500; letter-spacing:.22em;
    text-transform:uppercase; color:var(--text-mute);}
  .wb-eyebrow i{font-style:normal; color:var(--accent-soft); font-variant-numeric:tabular-nums;}
  .wb h3{font-size:clamp(24px,2.9vw,38px); line-height:1.1; letter-spacing:-0.035em;
    margin-bottom:16px; max-width:18ch;}
  .wb-txt > p{color:var(--text-dim); font-size:clamp(15.5px,1.4vw,17.5px); line-height:1.62;
    max-width:52ch;}
  .wb-before{margin-top:18px; padding-top:14px; border-top:1px solid var(--border);
    font-size:13.5px; line-height:1.55; color:var(--text-mute); max-width:52ch;}
  .wb-before-lab{display:inline-block; margin-inline-end:10px; font-family:var(--font-mono);
    font-size:10.5px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
    color:var(--text-mute); opacity:.75;}
  .wb-fig{display:flex; align-items:center; justify-content:center; min-width:0;}
  .wb-art{width:100%; max-width:340px; height:auto; color:var(--accent-soft); opacity:.85;}
  .wb-grid{opacity:.28;}
  .wb-pulse{transform-origin:center; animation:wbPulse 3.6s ease-in-out infinite;}
  @keyframes wbPulse{0%,100%{opacity:.18; transform:scale(.92);} 50%{opacity:.6; transform:scale(1.05);}}
  .wb-fill, .wb-bar{transform-origin:left center; animation:wbGrow 5s ease-in-out infinite;}
  .wb-bar{transform-origin:center bottom;}
  @keyframes wbGrow{0%,100%{transform:scaleX(1);} 50%{transform:scaleX(.72);}}
  .wb-bar{animation-name:wbGrowY;}
  @keyframes wbGrowY{0%,100%{transform:scaleY(1);} 50%{transform:scaleY(.6);}}
  .wb-tile{animation:wbFade 4.4s ease-in-out infinite;}
  @keyframes wbFade{0%,100%{opacity:.35;} 50%{opacity:1;}}
  .wb-hand{transform-origin:110px 80px; animation:wbSpin 8s linear infinite;}
  @keyframes wbSpin{to{transform:rotate(360deg);}}
  .wb-ping{animation:wbPing 2.6s ease-in-out infinite;}
  @keyframes wbPing{0%,100%{opacity:.3;} 50%{opacity:1;}}
  .wb-d0{animation-delay:0s;} .wb-d1{animation-delay:.35s;} .wb-d2{animation-delay:.7s;}
  .wb-d3{animation-delay:1.05s;} .wb-d4{animation-delay:1.4s;}
  @media (prefers-reduced-motion:reduce){
    .wb{opacity:1; transform:none; transition:none;}
    .wb-pulse, .wb-fill, .wb-bar, .wb-tile, .wb-hand, .wb-ping{animation:none;}
  }
  @media (max-width:860px){
    .wb{grid-template-columns:1fr; gap:26px;}
    .wb:nth-child(even) .wb-txt, .wb:nth-child(even) .wb-fig{grid-column:1;}
    .wb:nth-child(even) .wb-fig{grid-row:auto;}
    .wb-fig{order:2;}
    .wb-art{max-width:260px;}
  }

  /* ==========================================================================
     ONECLOUD TECHNOLOGIE STORE — un seul bloc, fiches compactes
     Neuf categories a la suite ; les cinq services detailles se deplient.
     ========================================================================== */
  .st-cats{display:flex; flex-direction:column; gap:clamp(24px,2.8vw,38px);}
  .st-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(176px,1fr));
    gap:9px; align-items:start;}
  @media (min-width:641px){ .st-card.is-lead{grid-column:span 2;} }
  .st-card-h{display:flex; align-items:center; gap:12px; min-width:0;}
  .st-sub svg, .st-sub img{width:14px; height:14px; border-radius:3px; flex:0 0 auto;}
  .st-lab{display:block; margin-bottom:5px; font-family:var(--font-mono); font-size:9.8px;
    font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--text-mute);}
  @media (max-width:640px){
    .st-grid{grid-template-columns:1fr;}
  }