/* =====================================================================
   Page d'accueil — la couleur au service d'un lecteur non spécialiste
   ---------------------------------------------------------------------
   Feuille additionnelle, chargée par index.html seule. Elle ne modifie
   aucune règle existante : elle se pose par-dessus. La retirer du <head>
   suffit à revenir exactement à la version précédente.

   Principe : la couleur ne décore pas, elle aide à lire. Elle sert à
   distinguer les étapes d'un parcours, à faire ressortir le chiffre
   qu'on retiendra, et à donner à chaque rubrique une identité qu'on
   reconnaît sans lire son titre.

   Teintes : celles de la charte, déjà définies dans site.css sous
   --c1-ink à --c4-ink et --c1-rgb à --c4-rgb.
   ===================================================================== */


/* ---------------------------------------------------------------------
   Variantes lisibles pour la couleur posée sur du TEXTE
   ---------------------------------------------------------------------
   Un pictogramme se contente d'un contraste de 3:1 ; un texte en exige
   4,5. Sur fond blanc, le bleu et le vert de la charte n'y parviennent
   pas, même déjà assombris pour les pictos. Ces deux valeurs leur sont
   réservées : chiffres clés, intitulés de rubrique, mots mis en avant.
   En mode sombre les teintes de la charte passent le seuil : rien à
   corriger, --cN-tx reprend --cN-ink.
   --------------------------------------------------------------------- */
:root{ --c1-tx:var(--c1-ink); --c2-tx:var(--c2-ink);
       --c3-tx:var(--c3-ink); --c4-tx:var(--c4-ink); }
html[data-theme="light"]{ --c2-tx:#037dba; --c3-tx:#03893e; }


/* ═══════ 1. LA FRISE DE DÉPLOIEMENT DEVIENT UN PARCOURS ═══════
   Trois jalons, trois couleurs qui suivent le dégradé du logotype :
   on voit d'un coup d'œil qu'il s'agit d'une progression dans le temps,
   et non de trois informations sans lien. L'étape en cours respire. */
.neo-mile{position:relative}
.neo-mile li{position:relative}
.neo-mile li:nth-child(1) .nm-dot{background:#a06cf5;box-shadow:0 0 0 4px rgba(154,108,245,.26)}
.neo-mile li:nth-child(2) .nm-dot{background:#04acff;box-shadow:0 0 0 4px rgba(4,172,255,.24)}
.neo-mile li:nth-child(3) .nm-dot{background:#05ca5c;box-shadow:0 0 0 4px rgba(5,202,92,.24)}
.neo-mile li.is-now .nm-dot{animation:oc-battement 2.8s ease-in-out infinite}
@keyframes oc-battement{
  0%,100%{box-shadow:0 0 0 4px rgba(154,108,245,.26)}
  50%    {box-shadow:0 0 0 9px rgba(154,108,245,.10)}
}
/* le filet sous la frise reprend les trois couleurs dans l'ordre */
.neo-mile{border-top:0 !important}
.neo-mile::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;height:2px;
  background:linear-gradient(90deg,#a06cf5 0%,#04acff 52%,#05ca5c 100%);
  opacity:.55;border-radius:2px;
}
.neo-mile li.is-now em{text-shadow:0 0 22px rgba(154,108,245,.55)}


/* ═══════ 2. LES QUATRE PROMESSES, UNE COULEUR CHACUNE ═══════
   Le numéro prend une pastille teintée, et surtout le chiffre clé —
   « 0,00 DZD/h », « 100 % » — passe en couleur. C'est ce qu'un lecteur
   non technique retient d'une page ; il ne doit pas être en gris. */
/* la liste compte six promesses : les teintes tournent par quatre, et une
   valeur de repli est posée sur .arg-row pour qu'aucune ligne ajoutée plus
   tard ne se retrouve sans couleur. */
.arg-list .arg-row{--a-ink:var(--c1-ink); --a-tx:var(--c1-tx); --a-rgb:var(--c1-rgb)}
.arg-list .arg-row:nth-child(4n+1){--a-ink:var(--c1-ink); --a-tx:var(--c1-tx); --a-rgb:var(--c1-rgb)}
.arg-list .arg-row:nth-child(4n+2){--a-ink:var(--c2-ink); --a-tx:var(--c2-tx); --a-rgb:var(--c2-rgb)}
.arg-list .arg-row:nth-child(4n+3){--a-ink:var(--c3-ink); --a-tx:var(--c3-tx); --a-rgb:var(--c3-rgb)}
.arg-list .arg-row:nth-child(4n+4){--a-ink:var(--c4-ink); --a-tx:var(--c4-tx); --a-rgb:var(--c4-rgb)}

.arg-list .arg-row{position:relative;border-radius:16px;
  transition:background .24s ease, transform .24s ease}
/* un rail coloré s'allume au survol, sur le bord intérieur */
.arg-list .arg-row::before{
  content:"";position:absolute;inset-block:14%;inset-inline-start:-14px;width:3px;
  border-radius:3px;background:var(--a-ink);
  opacity:0;transform:scaleY(.4);transform-origin:center;
  transition:opacity .24s ease, transform .24s ease;
}
.arg-list .arg-row:hover{background:rgba(var(--a-rgb),.05)}
.arg-list .arg-row:hover::before{opacity:1;transform:scaleY(1)}

/* Le numéro passe de la pastille teintée à l'aplat plein : c'est le repère
   le plus immédiat de la liste, il porte la couleur au lieu de la suggérer.
   Sur fond clair le chiffre est blanc sur un aplat foncé ; sur fond sombre
   c'est l'inverse, chiffre encre sur un aplat vif. Les deux sens passent le
   seuil de 4,5 — mesuré de 4,51 à 11,93. */
.arg-list .arg-n{
  color:#ffffff;font-weight:800;font-style:normal;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:52px;height:52px;border-radius:15px;
  font-size:1.14em;letter-spacing:.01em;
  background:var(--a-tx);
  box-shadow:0 10px 22px -12px rgba(var(--a-rgb),.85),
             inset 0 1px 0 rgba(255,255,255,.22);
}
html:not([data-theme="light"]) .arg-list .arg-n{
  color:#0f0f13;background:var(--a-ink);
  box-shadow:0 10px 22px -12px rgba(var(--a-rgb),.7);
}
/* le chiffre à retenir, en couleur et un cran plus grand
   (pas de filet décoratif ici : .arg-fig devient une rangée flex sur
   les écrans étroits, un pseudo-élément s'y glisserait comme colonne) */
.arg-list .arg-fig strong{color:var(--a-tx);font-size:1.06em;letter-spacing:-.012em}
/* le rappel de la loi 18-07 reste souligné, mais dans la couleur de sa ligne */
.arg-list .arg-row .lead-strong{color:var(--a-tx)}


/* ═══════ 3. CHAQUE RUBRIQUE A SA COULEUR ═══════
   L'intitulé qui coiffe chaque section prend une pastille teintée.
   On se repère dans la page à la couleur avant de lire le titre —
   c'est ce qui aide le plus un visiteur qui parcourt sans s'arrêter. */
.sec-head .eyebrow{
  padding:7px 15px;border-radius:999px;
  background:rgba(var(--e-rgb,var(--c1-rgb)),.12);
  color:var(--e-tx,var(--c1-tx));
  box-shadow:inset 0 0 0 1px rgba(var(--e-rgb,var(--c1-rgb)),.24);
}
#args   .sec-head{--e-tx:var(--c1-tx); --e-rgb:var(--c1-rgb)}
#store  .sec-head{--e-tx:var(--c2-tx); --e-rgb:var(--c2-rgb)}
#platform .sec-head{--e-tx:var(--c3-tx); --e-rgb:var(--c3-rgb)}
#security .sec-head{--e-tx:var(--c4-tx); --e-rgb:var(--c4-rgb)}
#about  .sec-head{--e-tx:var(--c1-tx); --e-rgb:var(--c1-rgb)}
/* le pictogramme de l'intitulé, masqué en version épurée, réapparaît */
.sec-head .eyebrow-ic{display:inline-flex !important;
  width:26px;height:26px;border-radius:9px;align-items:center;justify-content:center}
.sec-head .eyebrow-ic svg{width:15px;height:15px}


/* ═══════ 4. LA PAGE RESPIRE PAR VOILES COLORÉS ═══════
   Un dégradé très faible — trois à cinq pour cent — derrière une section
   sur deux. Assez pour que la page ne soit plus une étendue uniforme,
   trop peu pour gêner la lecture d'un paragraphe. */
#args{
  background:
    radial-gradient(880px 420px at 6% 0%,  rgba(var(--c1-rgb),.055), transparent 62%),
    radial-gradient(760px 400px at 96% 88%, rgba(var(--c2-rgb),.045), transparent 60%);
}
#platform{
  background:
    radial-gradient(900px 440px at 92% 4%, rgba(var(--c3-rgb),.05), transparent 62%),
    radial-gradient(720px 380px at 4% 92%, rgba(var(--c4-rgb),.045), transparent 60%);
}
#security{
  background:radial-gradient(900px 430px at 50% 0%, rgba(var(--c4-rgb),.05), transparent 64%);
}


/* ═══════ 5. LE STORE : UN LISERÉ DE MARQUE ═══════ */
#store .sec-head::after{
  content:"";display:block;width:86px;height:3px;border-radius:3px;margin-top:22px;
  background:var(--grad-marque);
}


/* ═══════ 6. L'APPEL FINAL ═══════
   Le filet qui ouvre le dernier bloc porte le dégradé du logotype, et
   une lueur très douce monte derrière le titre. C'est le seul endroit
   de la page où la marque s'autorise un effet. */
.finalcta-inner{border-top:0 !important;position:relative}
.finalcta-inner::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px;
  background:var(--grad-marque);border-radius:3px;
}
.finalcta-inner::after{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;height:70%;
  background:radial-gradient(620px 240px at 50% 0%, rgba(var(--c1-rgb),.10), transparent 70%);
  pointer-events:none;z-index:0;
}
.finalcta-inner > *{position:relative;z-index:1}


/* ═══════ 7. RÉGLAGES SELON LE THÈME ET L'ÉCRAN ═══════ */
/* en mode sombre les voiles sont un peu plus francs : le fond les absorbe */
html:not([data-theme="light"]) #args,
html:not([data-theme="light"]) #platform,
html:not([data-theme="light"]) #security{filter:saturate(1.08)}
html:not([data-theme="light"]) .arg-list .arg-row:hover{background:rgba(var(--a-rgb),.075)}

@media (max-width:860px){
  .arg-list .arg-row::before{inset-inline-start:-10px}
  .arg-list .arg-n{min-width:44px;height:44px;border-radius:13px;font-size:1.06em}
}
@media (prefers-reduced-motion:reduce){
  .neo-mile li.is-now .nm-dot{animation:none}
  .arg-list .arg-row,.arg-list .arg-row::before{transition:none}
}


/* ═══════ 8. LES SIX CARTES DE LA CONSOLE ═══════
   Chaque fonction de la console reçoit sa pastille colorée et arrondie.
   Six carrés gris se lisent comme une liste ; six pastilles colorées se
   lisent comme un choix — c'est la différence pour un visiteur qui
   découvre le produit. */
.cons-grid .cons-ic{
  width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
}
.cons-grid .cons-ic svg{width:22px;height:22px}
.cons-grid .cons-card:nth-child(1) .cons-ic,
.cons-grid .cons-card:nth-child(5) .cons-ic{background:rgba(var(--c1-rgb),.13)}
.cons-grid .cons-card:nth-child(2) .cons-ic,
.cons-grid .cons-card:nth-child(6) .cons-ic{background:rgba(var(--c2-rgb),.13)}
.cons-grid .cons-card:nth-child(3) .cons-ic{background:rgba(var(--c3-rgb),.13)}
.cons-grid .cons-card:nth-child(4) .cons-ic{background:rgba(var(--c4-rgb),.13)}

.cons-grid .cons-card{border-radius:14px;transition:background .22s ease}
.cons-grid .cons-card:nth-child(1):hover,
.cons-grid .cons-card:nth-child(5):hover{background:rgba(var(--c1-rgb),.055)}
.cons-grid .cons-card:nth-child(2):hover,
.cons-grid .cons-card:nth-child(6):hover{background:rgba(var(--c2-rgb),.055)}
.cons-grid .cons-card:nth-child(3):hover{background:rgba(var(--c3-rgb),.055)}
.cons-grid .cons-card:nth-child(4):hover{background:rgba(var(--c4-rgb),.055)}


/* ═══════ 9. LE POINT D'INTERROGATION DE « NEOCLOUD » ═══════
   Il invite un lecteur qui ne connaît pas le mot à cliquer. Il doit se
   voir : c'est la porte d'entrée de la page pour un non-spécialiste. */
.neo-help{
  background:linear-gradient(135deg,#8b3ff0,#04acff) !important;
  border-color:rgba(255,255,255,.55) !important;color:#fff !important;
  box-shadow:0 4px 16px -4px rgba(4,172,255,.6);
}
.neo-help:hover{
  background:linear-gradient(135deg,#04acff,#05ca5c) !important;
  border-color:#fff !important;
}


/* ═══════ 10. LA BANNIÈRE : ALGER, FLOUTÉE, SOUS LES COULEURS DE LA MARQUE ═══
   La Grande Poste d'Alger remplace la carte du continent en points lumineux.
   Un visiteur algérien reconnaît le lieu avant d'avoir lu une ligne : c'est
   l'argument de souveraineté rendu immédiat, sans un mot.

   La photo est floutée. Ce n'est pas un effet : nette, elle réclamait
   l'attention que le titre doit capter, et ses arcades découpaient le texte.
   Floue, elle reste reconnaissable — la silhouette du monument et la baie
   suffisent — mais redevient un fond. Le flou débordant sur les bords, la
   photo est agrandie de sept pour cent pour qu'aucun liseré ne se voie.

   Par-dessus, un voile diagonal en trois temps — violet, bleu, vert, l'ordre
   du logotype — doublé d'un assombrissement vertical qui garde le texte
   blanc lisible du haut au bas de l'écran. */
.neo-bg{
  grid-template-columns:1fr !important;
  /* Pas de flou, ou presque : 1,2 px, juste de quoi ôter le piqué des
     arcades. Ce qui fait reculer la photo, c'est la désaturation et
     l'assombrissement — elle cesse de crier sans cesser d'être nette.
     Agrandie de 3 % pour qu'aucun liseré ne se voie sur les bords. */
  filter:blur(1.2px) saturate(.76) brightness(.94);
  transform:scale(1.03);transform-origin:center;
}
.neo-bg-a{object-position:50% 40%}

.neo-banner-overlay{
  background:
    /* voile allégé : la photo reste visible du haut au bas */
    linear-gradient(180deg,
      rgba(11,4,28,.47) 0%,
      rgba(11,4,28,.18) 42%,
      rgba(8,4,22,.78) 100%),
    /* marque : le dégradé du logotype balaie la photo en diagonale */
    linear-gradient(104deg,
      rgba(71,3,156,.47) 0%,
      rgba(20,70,190,.33) 46%,
      rgba(4,150,160,.25) 76%,
      rgba(5,160,95,.24) 100%);
}
/* une lueur bleue monte du bas, côté baie */
.neo-banner::after{
  content:"";position:absolute;inset-block-end:0;inset-inline:0;height:42%;
  background:radial-gradient(70% 100% at 74% 100%, rgba(4,172,255,.18), transparent 68%);
  pointer-events:none;z-index:1;
}
/* le filet de marque ferme la bannière */
.neo-banner::before{
  content:"";position:absolute;inset-block-end:0;inset-inline:0;height:3px;z-index:3;
  background:linear-gradient(90deg,#a06cf5 0%,#04acff 52%,#05ca5c 100%);
}
.neo-banner-content{position:relative;z-index:2}
/* Halo sombre local, derrière le seul bloc de texte. La façade de la Grande
   Poste est très claire : sans lui, le titre blanc tomberait à 2,1 de
   contraste. Assombrir toute l'image pour y remédier reviendrait à perdre la
   photo ; ce halo la garde lisible partout ailleurs. */
.neo-banner-content::before{
  content:"";position:absolute;inset:-7% -9%;z-index:-1;pointer-events:none;
  background:radial-gradient(62% 56% at 50% 52%,
    rgba(9,3,26,.72) 0%, rgba(9,3,26,.38) 60%, transparent 82%);
}


/* ═══════ 11. LE LOGOTYPE 1CLOUD DANS LA BANNIÈRE ═══════
   Le fichier officiel remplace l'ancien lettrage « ONE CLOUD ».
   Posé à taille mesurée plutôt qu'en travers de l'image : sur une photo,
   un logo qui couvre toute la largeur dispute la place au titre au lieu
   de le présenter. Le halo sombre le décolle du fond clair. */
.neo-logo{width:auto !important;filter:none !important}
.neo-logo-img{
  width:min(68vw,330px);height:auto;display:block;
  filter:drop-shadow(0 6px 30px rgba(6,2,20,.7));
}
@media (max-width:640px){ .neo-logo-img{width:min(74vw,236px)} }

/* la photo étant plus claire que l'ancien fond, le texte reprend une ombre */
.neo-banner-sub{text-shadow:0 2px 26px rgba(8,3,24,.85)}
.neo-mile li em,.neo-mile li span{text-shadow:0 2px 16px rgba(8,3,24,.9)}


/* ═══════ 12. LES LOGOS DU STORE RETROUVENT LEURS COULEURS ═══════
   Le bandeau défilant des technologies était désaturé — `grayscale(1)` à
   62 % d'opacité — et ne reprenait ses couleurs qu'au survol. Un visiteur
   qui ne survole rien, et celui qui consulte sur mobile où le survol
   n'existe pas, ne voyaient donc jamais que des vignettes grises.

   Les couleurs sont pourtant déjà dans les fichiers : le bleu de Docker,
   celui de Kubernetes et de PostgreSQL, le vert de MongoDB, le jaune de
   Tux. Elles sont simplement rendues visibles. */
.mq-i{opacity:1 !important;filter:none !important}

/* La pastille garde une présence discrète, et s'anime toujours au survol :
   fond légèrement teinté, bordure qui s'allume à la couleur de la marque. */
.mq-i{background:var(--surface);transition:border-color .25s ease, transform .25s ease}
.mq-i:hover{transform:translateY(-2px);border-color:rgba(var(--c1-rgb),.45)}

/* Les vignettes portent un fond blanc dans leur propre SVG : en thème
   sombre, un liseré très léger les empêche de flotter sur le fond noir. */
html:not([data-theme="light"]) .mq-i{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}


/* ═══════ 13. LE PARTENAIRE CITÉ DANS UNE PROMESSE ═══════
   Deux arguments s'appuient sur un tiers : la réplication chez Algérie
   Télécom, et le Label Startup qui ouvre la commande publique. Dans les
   deux cas le logo vaut mieux qu'une phrase — on le reconnaît avant de
   lire. Il est posé sur une plaque blanche, parce que ces deux logos sont
   dessinés pour du papier et se perdraient sur le fond sombre. */
.arg-partner{
  display:flex;align-items:center;gap:14px;margin-top:16px;
  padding:12px 16px 12px 12px;border-radius:14px;
  background:rgba(var(--a-rgb),.06);
  box-shadow:inset 0 0 0 1px rgba(var(--a-rgb),.18);
  max-width:56ch;
}
.arg-partner img{
  height:34px;width:auto;flex:none;display:block;
  background:#ffffff;border-radius:8px;padding:5px 8px;
  box-shadow:0 2px 8px -3px rgba(0,0,0,.28);
}
.arg-partner span{font-size:13.6px;line-height:1.5;color:var(--text-dim)}
/* le label est un médaillon : il garde sa forme, sans plaque ni cadre */
.arg-partner-label img{
  height:56px;background:none;border-radius:0;padding:0;box-shadow:none;
}
@media (max-width:640px){
  .arg-partner{flex-direction:column;align-items:flex-start;gap:10px}
  .arg-partner span{font-size:13px}
}