/* HARPIA-SIJEN — feuille de style.

   ⚠️ ÉCHELLE RÉGLÉE PAR YNAI (2026-08-22) : l'EN-TÊTE (logo + signature) est à
   −30 %, TOUT LE RESTE à −15 % par rapport au premier jet. Ces valeurs sont
   délibérées, pas des restes d'essais : ne pas les « arrondir » en retouchant
   une section isolée, sous peine de rompre le rapport entre l'en-tête et le
   corps de page, qui est ce qui donne son calme à la mise en page.
   ⚠️ LE CSS EST DANS CE FICHIER, ET NON DANS LA PAGE, POUR UNE RAISON DE
   SÉCURITÉ, pas de rangement. Un `<style>` en ligne oblige la politique de
   sécurité du contenu à autoriser `style-src 'unsafe-inline'` — une brèche
   qu'un auditeur relève immédiatement. En externalisant, la CSP passe à
   `style-src 'self'` : la page n'accepte plus AUCUN contenu en ligne, ni
   style, ni script. Sur le site d'une société qui vend de la cybersécurité,
   cette ligne d'en-tête vaut mieux qu'un paragraphe d'argumentaire. */

  :root{
    --marine:#0B1B2B;        /* fond principal, encre de la marque */
    --marine-clair:#12293F;  /* surfaces */
    --or:#C9A227;            /* accent : le cauri et les filets du logo */
    --creme:#F4EFE4;         /* texte principal */
    --creme-doux:#B9B2A4;    /* texte secondaire */
    --trait:rgba(244,239,228,.14);
    --large:1080px;
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0;
    background:var(--marine);
    color:var(--creme);
    font:13.6px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    /* ── FOND : MASQUES IVOIRIENS EN FILIGRANE, SUR TRAME DE CIRCUITS ──────
       Deux couches superposées, et l'ordre compte :
        1. les MASQUES (`masques.svg`) — Kpelié sénoufo, Goli baoulé, masque
           Dan — dessinés en lignes épurées, à peine perceptibles ;
        2. la TRAME DE POINTS dorés, qui rappelle les circuits imprimés des
           ailes de l'aigle du logo.
       Ensemble : l'ancrage ivoirien et la technologie, ce que la société est.

       ⚠️ L'OPACITÉ DES MASQUES EST DANS LE FICHIER SVG, pas ici. Une image de
       fond ne peut pas recevoir d'`opacity` sans que toute la page, texte
       compris, devienne translucide. Pour l'ajuster, modifier l'alpha du
       `stroke` dans `masques.svg` — et non ajouter une règle ici.

       ⚠️ `background-attachment: fixed` est ÉCARTÉ volontairement : il provoque
       des à-coups au défilement sur mobile, et c'est là que le site sera
       surtout lu. */
    background-image:
      url("/masques.svg"),
      radial-gradient(rgba(201,162,39,.07) 1px,transparent 1px);
    background-size:520px 520px, 26px 26px;
    background-repeat:repeat, repeat;
  }
  a{color:var(--or);text-decoration:none}
  a:hover,a:focus{text-decoration:underline}
  .zone{max-width:var(--large);margin:0 auto;padding:0 19px}
  h1,h2,h3{line-height:1.15;margin:0 0 14px;font-weight:700;letter-spacing:-.01em}
  h2{font-size:clamp(19.5px,2.9vw,26px)}
  p{margin:0 0 14px}

  /* ── En-tête ─────────────────────────────────────────────────────────── */
  header{padding:36px 0 6px;text-align:center}
  header img{width:min(238px,56vw);height:auto;display:block;margin:0 auto}
  .signature{
    margin-top:10px;font-size:9px;letter-spacing:.24em;text-transform:uppercase;
    color:var(--or);font-weight:700;
  }

  /* ── Accroche ────────────────────────────────────────────────────────── */
  .accroche{padding:37px 0 48px;text-align:center;border-bottom:1px solid var(--trait)}
  .accroche h1{font-size:clamp(24px,4.25vw,39px);max-width:20ch;margin:0 auto 15px}
  .accroche p{font-size:clamp(13.6px,1.87vw,16px);color:var(--creme-doux);max-width:62ch;margin:0 auto}
  .lieu{
    display:inline-block;margin-top:22px;padding:6px 14px;border:1px solid var(--trait);
    border-radius:100px;font-size:11px;color:var(--creme-doux);
  }

  /* ── Sections ────────────────────────────────────────────────────────── */
  section{padding:48px 0;border-bottom:1px solid var(--trait)}
  .titre-section{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--or);font-weight:700;margin-bottom:10px}
  .grille{display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(221px,1fr));margin-top:22px}
  .carte{
    background:var(--marine-clair);border:1px solid var(--trait);border-radius:16px;
    padding:20px 19px;
  }
  .carte h3{font-size:16px;color:var(--creme);margin-bottom:8px}
  .carte p{color:var(--creme-doux);font-size:12.3px;margin:0}
  .carte .num{
    display:inline-block;font-size:10px;font-weight:700;color:var(--or);
    letter-spacing:.14em;margin-bottom:12px;
  }

  /* ── Produit ─────────────────────────────────────────────────────────── */
  .produit{
    background:var(--marine-clair);border:1px solid var(--trait);border-radius:20px;
    padding:25px 22px;margin-top:20px;
  }
  .produit h3{font-size:19.5px;margin-bottom:6px}
  .produit .role{font-size:10.6px;color:var(--or);letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin-bottom:14px}
  .puces{margin:14px 0 0;padding-left:17px;color:var(--creme-doux);font-size:12.3px;line-height:1.9}
  .bouton{
    display:inline-block;margin-top:20px;background:var(--or);color:var(--marine);
    font-weight:700;font-size:12.3px;padding:10px 19px;border-radius:12px;
  }
  .bouton:hover,.bouton:focus{text-decoration:none;filter:brightness(1.08)}

  /* ── Mentions légales ────────────────────────────────────────────────── */

  footer{padding:31px 0 39px;text-align:center;color:var(--creme-doux);font-size:11px}
  footer img{width:44px;height:auto;opacity:.75;margin-bottom:14px}

/* ⚠️ CES DEUX RÈGLES REMPLACENT DES ATTRIBUTS `style=` EN LIGNE.
   Avec `style-src 'self'` et sans `unsafe-inline`, le navigateur BLOQUE aussi
   les attributs de style, pas seulement les balises `<style>`. Deux attributs
   oubliés dans la page auraient donc cassé le rendu chez le visiteur, tout en
   laissant le site parfait en local — le genre de défaut qu'on ne voit qu'en
   production. La CSP stricte n'est tenable que si la page est vraiment propre. */
.intro-contact{color:var(--creme-doux);max-width:60ch}
.editeur{margin-top:6px}