/* 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{
    /* ⚠️ FOND ÉCLAIRCI À LA DEMANDE DE YNAI (2026-08-22), et la valeur n'est
       pas choisie à l'œil : au-delà de ce bleu, le texte secondaire tombe sous
       le seuil de lisibilité. Mesures du contraste avec le texte crème :
         #0B1B2B → 15,2 / 8,3     (l'ancien, très sombre)
         #17395A → 10,4 / 5,6     ← retenu, confortable
         #245177 →  7,3 / 4,0     ← le texte secondaire passe SOUS la norme
       Éclaircir davantage exigerait d'abandonner le gris-crème des paragraphes
       secondaires, donc de retoucher toute la page. */
    --marine:#17395A;        /* fond principal, encre de la marque, éclairci */
    --marine-clair:#20486E;  /* surfaces, relevées d'autant */
    --or:#C9A227;            /* accent : le cauri et les filets du logo */
    --creme:#F4EFE4;         /* texte principal */
    --creme-doux:#B9B2A4;    /* texte secondaire */
    --trait:rgba(244,239,228,.18);
    --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,.10) 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 ─────────────────────────────────────────────────────────── */
  /* ── EN-TÊTE : LOGO À GAUCHE, MENU À DROITE ──────────────────────────
     Disposition reprise du modèle AABB retenu par ynai (2026-08-22), puis
     complétée à sa demande : la signature qui accompagnait le logo cède la
     place au MENU du site, et redescend sous l'accroche où elle dit l'activité
     plutôt que d'occuper la barre de navigation.

     ⚠️ CE QUE CETTE BARRE LIBÈRE : centré et large, le logo repoussait
     l'accroche sous la ligne de flottaison — le visiteur arrivait sur une
     marque, pas sur une proposition. Rangé à gauche, il laisse la première
     chose lue être CE QUE FAIT L'ENTREPRISE.

     ⚠️ LA BARRE PASSE À LA LIGNE sur petit écran (`flex-wrap`) : cinq entrées
     de menu ne tiennent pas à côté du logo sur un téléphone, et un menu
     repliable exigerait du JavaScript que ce site s'interdit. */
  header{padding:20px 0 14px;border-bottom:1px solid var(--trait)}
  .barre{
    display:flex;align-items:center;flex-wrap:wrap;
    justify-content:space-between;gap:12px 22px;
  }
  .retour-accueil{display:block;flex:none;line-height:0}
  header img{
    /* Hauteur pilotée, largeur libre : le logo garde ses proportions quelle que
       soit la déclinaison utilisée. Agrandi à la demande de ynai. */
    height:88px;width:auto;display:block;
  }
  .menu{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center}
  .menu a{
    font-size:13.5px;font-weight:700;color:var(--creme-doux);
    letter-spacing:.03em;text-decoration:none;padding:4px 0;
    border-bottom:1.5px solid transparent;
  }
  .menu a:hover,.menu a:focus{color:var(--creme);border-bottom-color:var(--or);text-decoration:none}

  /* ── ACCROCHE : ALIGNÉE SUR LE RESTE DU SITE ─────────────────────────
     Ajustée à la demande de ynai (2026-08-22) : « s'adapter au reste du site,
     tant au niveau de la taille de la police que dans l'occupation de la page ».

     ⚠️ TROIS CHANGEMENTS, ET LE PREMIER COMMANDE LES AUTRES.
      1. ALIGNÉE À GAUCHE, comme toutes les sections qui suivent. Centrée, elle
         était le seul bloc de la page à l'être : l'œil devait changer de point
         de départ dès le deuxième écran.
      2. TITRE RAMENÉ À L'ÉCHELLE des autres titres. Il montait à 39 px quand
         les `h2` plafonnent à 26 : l'écart faisait de l'accroche une bannière
         plutôt que la première phrase d'un discours.
      3. LARGEUR DE LECTURE ÉLARGIE (20ch était une colonne étroite qui hachait
         la phrase en cinq lignes) et calée sur les mêmes 66 caractères que les
         chapôs des sections. */
  .accroche{padding:38px 0 42px;border-bottom:1px solid var(--trait)}
  /* ⚠️ ACCROCHE EN DEUX COLONNES SUR GRAND ÉCRAN (ynai, 2026-08-22 : « trop de
     vide à droite »). Un paragraphe bridé à 66 caractères dans une page de
     1080 px laissait près de la moitié de la ligne inoccupée, alors que les
     cartes juste en dessous, elles, s'étendaient d'un bord à l'autre.

     ⚠️ ON N'A PAS SIMPLEMENT ÉLARGI LE PARAGRAPHE, et c'est le point : au-delà
     de 90 caractères, l'œil perd le début de la ligne suivante et la lecture
     devient pénible. Remplir 1080 px d'une seule colonne aurait donc réglé le
     vide en abîmant le texte. Le titre prend la colonne de gauche, le
     paragraphe celle de droite : la page est occupée d'un bord à l'autre ET
     chaque ligne reste de longueur confortable. */
  .accroche .zone{
    display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
    gap:10px 46px;align-items:start;
  }
  .accroche .sous-accroche{grid-column:1 / -1}
  @media (max-width:760px){
    .accroche .zone{grid-template-columns:1fr;gap:14px}
  }
  .accroche h1{
    font-size:clamp(22px,3.6vw,34px);max-width:20ch;margin:0 0 16px;
  }
  .accroche p{
    font-size:15.5px;color:var(--creme-doux);max-width:none;margin:0;line-height:1.75;
  }
  .sous-accroche{
    display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:22px;
  }
  .lieu{
    display:inline-block;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 .retour-accueil{display:inline-block;line-height:0;margin-bottom:14px}
footer img{width:44px;height:auto;opacity:.75;display:block}
/* L'emblème s'éclaire au survol : sans ce retour, rien n'indiquerait qu'il est
   cliquable, un pied de page n'étant pas un endroit où l'on cherche des liens. */
footer .retour-accueil:hover img,footer .retour-accueil:focus img{opacity:1}

/* ⚠️ 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:none;font-size:14.6px;line-height:1.72}

/* ── EXPERTISES DÉTAILLÉES ET SECTEURS ────────────────────────────────────
   Ajouts du 2026-08-22, d'après le document d'offre fourni par ynai : cinq
   domaines au lieu de trois, chacun avec ses prestations, plus les secteurs
   cibles.

   ⚠️ LES CARTES S'ALLONGENT BEAUCOUP avec leurs listes. La grille passe donc à
   des colonnes plus étroites et les listes sont resserrées : une carte qui
   dépasse la hauteur d'écran oblige à défiler pour comparer deux expertises,
   ce qui est précisément ce qu'un visiteur vient faire ici. */

.chapo{
  color:var(--creme-doux);font-size:14.6px;line-height:1.72;
  max-width:88ch;margin:0 0 4px;
}

.liste{
  margin:10px 0 0;padding-left:0;list-style:none;
  color:var(--creme-doux);font-size:12.3px;line-height:1.55;
}
.liste li{position:relative;padding-left:14px;margin-bottom:6px}
/* Puce dessinée en CSS plutôt qu'en caractère : elle garde l'or de la marque
   et reste alignée quelle que soit la longueur de la ligne. */
.liste li::before{
  content:"";position:absolute;left:0;top:.52em;
  width:5px;height:5px;border-radius:50%;background:var(--or);opacity:.7;
}

/* ── SECTEURS : des pastilles, pas une liste ──────────────────────────────
   ⚠️ Ce ne sont pas des prestations mais des TERRAINS. Les présenter comme une
   sixième carte d'expertise aurait laissé croire qu'on vend « du secteur
   public » ; en pastilles, ils se lisent comme ce qu'ils sont — le champ
   d'intervention. */
.secteurs{
  list-style:none;margin:22px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:9px;
}
.secteurs li{
  border:1px solid var(--trait);border-radius:100px;
  padding:8px 16px;font-size:12.3px;font-weight:700;color:var(--creme);
  background:var(--marine-clair);
}

/* ── CONTACT EN DEUX COLONNES ─────────────────────────────────────────────
   Demande de ynai (2026-08-22) : la localisation à droite de la prise de
   contact.

   ⚠️ LA COLONNE DE DROITE EST PLUS ÉTROITE, et volontairement : l'action
   attendue reste d'écrire. Deux colonnes de même largeur auraient mis l'adresse
   au même rang que la mise en relation, alors qu'elle ne fait que la compléter.

   ⚠️ ELLES PASSENT L'UNE SOUS L'AUTRE en dessous de 640 px, l'e-mail en
   premier : sur un téléphone, personne ne cherche un itinéraire avant d'avoir
   décidé d'entrer en contact. */
.contact-grille{
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:26px 40px;align-items:start;margin-top:6px;
}
@media (max-width:640px){
  .contact-grille{grid-template-columns:1fr;gap:24px}
}

.localisation{
  background:var(--marine-clair);border:1px solid var(--trait);
  border-radius:16px;padding:20px 19px;
}
.localisation p{
  font-size:12.8px;color:var(--creme-doux);line-height:1.65;margin:0 0 14px;
}
.titre-mini{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--or);font-weight:700;margin-bottom:10px;
}
.lien-tel,.lien-carte{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:700;color:var(--or);
}
/* Le numéro est le contact le plus direct : mis en avant, et distingué du lien
   de carte par la couleur propre de WhatsApp. */
.lien-tel{color:#4ADE80;font-size:13.5px}
.lien-tel:hover,.lien-tel:focus{text-decoration:underline}
.lien-tel svg{flex:none}
/* ⚠️ SÉPARATION ENTRE LA CARTE ET LE TÉLÉPHONE (ynai, 2026-08-22 : « laisse une
   ligne entre eux »). Un filet plutôt qu'une simple marge : ce sont deux
   moyens de contact distincts, et sans trait ils se lisaient comme une seule
   liste — le lecteur ne savait plus où finissait l'adresse. */
.localisation .lien-carte + .titre-mini{
  display:block;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--trait);
}
.lien-carte:hover,.lien-carte:focus{text-decoration:underline}

/* ── « Services pas encore disponible » ───────────────────────────────────
   ⚠️ VISIBLE SANS ÊTRE ALARMANTE. Une mention de ce genre doit se lire, sinon
   elle ne protège de rien ; mais criée, elle ferait douter de tout le reste, y
   compris de ce qui EST livré aujourd'hui — N'Vito est en production. D'où l'or
   de la marque plutôt qu'un rouge d'avertissement, et un filet à gauche qui la
   détache du bloc sans l'en exclure. */
.bientot{
  margin:26px 0 0;padding:11px 0 11px 15px;
  border-left:2px solid var(--or);
  font-size:13px;font-weight:700;color:var(--or);line-height:1.5;
}

/* ── MARQUE « DISPONIBLE » SUR UN DOMAINE ─────────────────────────────────
   ⚠️ ELLE EXISTE À CAUSE DE LA MENTION QUI CLÔT LE BLOC. « Services pas encore
   disponible » couvre les domaines en préparation — mais les SERVICES
   LINGUISTIQUES, eux, sont le métier exercé aujourd'hui : traduction certifiée
   et interprétation de conférence pour la CEDEAO, l'UA, la BAD et la Banque
   Mondiale. Les laisser sous une mention « à venir » ferait passer pour un
   projet la seule prestation immédiatement livrable — et la plus solide.

   ⚠️ LE BADGE EST PLUS SPÉCIFIQUE QUE LA MENTION GÉNÉRALE, donc il l'emporte
   à la lecture : c'est la règle habituelle du particulier sur le général. */
.dispo{
  display:inline-block;vertical-align:middle;margin-left:8px;
  font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--marine);background:var(--or);
  padding:3px 8px;border-radius:100px;
}

/* ── TEXTE JUSTIFIÉ ───────────────────────────────────────────────────────
   Demande de ynai (2026-08-22).

   ⚠️ LA CÉSURE EST INDISPENSABLE, PAS UN RAFFINEMENT. Justifier sans elle
   force le navigateur à étirer les espaces entre les mots pour atteindre le
   bord droit : il apparaît alors des « rivières » blanches qui traversent le
   paragraphe, et le français les produit plus que l'anglais parce que ses mots
   sont longs. `hyphens:auto` autorise la coupure aux endroits corrects — d'où
   l'importance de `lang="fr"` sur la page, sans lequel le navigateur couperait
   selon les règles de l'anglais.

   ⚠️ CE QUI N'EST PAS JUSTIFIÉ, ET DÉLIBÉRÉMENT :
    • les TITRES — une ligne courte étirée jusqu'au bord produit des trous
      béants entre deux ou trois mots ;
    • les LISTES de prestations, pour la même raison, leurs lignes étant brèves ;
    • le MENU, le pied de page et les pastilles, qui ne sont pas du texte suivi.
   Justifier ne vaut que pour un bloc de plusieurs lignes pleines. */
.accroche p,
.chapo,
.intro-contact,
.carte > p,
.produit > p,
.localisation p{
  text-align:justify;
  /* Coupure des mots trop longs pour la colonne, selon les règles du français. */
  hyphens:auto;
  -webkit-hyphens:auto;
  /* Garde-fou : un mot insécable plus large que la colonne (une URL, un nom
     technique) la ferait déborder au lieu de se couper. */
  overflow-wrap:break-word;
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGES LÉGALES — confidentialité, mentions légales, conditions générales.
   Ajoutées le 2026-09-07 sur demande de ynai.

   ⚠️ AUCUN ATTRIBUT `style=` DANS CES PAGES NON PLUS. La CSP est en
   `style-src 'self'` et bloque aussi les attributs de style, pas seulement les
   balises `<style>`. Un attribut oublié casserait le rendu CHEZ LE VISITEUR
   uniquement, en laissant la page parfaite en local.

   ⚠️ COLONNE ÉTROITE, ET C'EST UNE DÉCISION DE LISIBILITÉ, pas d'esthétique :
   au-delà de 70 caractères par ligne, l'œil perd le début de la ligne suivante.
   Sur un texte juridique que personne ne lit avec plaisir, chaque obstacle
   supplémentaire est une raison d'abandonner.
   ══════════════════════════════════════════════════════════════════════════ */

.page-legale{max-width:760px;margin:0 auto;padding:6px 0 20px}
.page-legale h1{font-size:26.5px;line-height:1.22;margin:0 0 6px}
.page-legale .maj{color:var(--creme-doux);font-size:12px;margin:0 0 30px}
.page-legale h2{
  font-size:16.5px;margin:36px 0 10px;padding-top:18px;
  border-top:1px solid var(--trait);color:var(--creme);
}
.page-legale h2:first-of-type{border-top:0;padding-top:0}
.page-legale h3{font-size:13.8px;margin:22px 0 6px;color:var(--or)}
.page-legale p,.page-legale li{font-size:13.6px;line-height:1.74;color:var(--creme-doux)}
.page-legale strong{color:var(--creme);font-weight:600}
.page-legale ul{padding-left:0;list-style:none;margin:10px 0}
.page-legale li{position:relative;padding-left:15px;margin-bottom:7px}
.page-legale li::before{
  content:"";position:absolute;left:0;top:9px;
  width:5px;height:5px;background:var(--or);border-radius:50%;
}
.page-legale a{color:var(--creme)}

/* ⚠️ L'ENCADRÉ QUI PORTE UN ENGAGEMENT, pas un ornement. On y met ce que la
   société AFFIRME et qui est vérifiable par le lecteur lui-même — c'est la
   seule partie d'une politique de confidentialité qui vaille quelque chose. */
.page-legale .engagement{
  background:var(--marine-clair);border-left:3px solid var(--or);
  border-radius:0 10px 10px 0;padding:15px 18px;margin:18px 0;
}
.page-legale .engagement p{margin:0;color:var(--creme)}
.page-legale .engagement p + p{margin-top:9px}

/* ⚠️ CE QUI RESTE À COMPLÉTER SE VOIT DE LOIN, ET C'EST VOULU. Une mention
   légale incomplète mise en ligne engage la société ; un texte gris pâle noyé
   dans le paragraphe passerait la relecture. */
.page-legale .a-completer{
  background:rgba(201,162,39,.16);border-bottom:1px dashed var(--or);
  color:var(--creme);padding:0 4px;
}

.page-legale table{width:100%;border-collapse:collapse;margin:14px 0}
.page-legale th,.page-legale td{
  text-align:left;padding:9px 11px;border-bottom:1px solid var(--trait);
  font-size:13px;line-height:1.6;vertical-align:top;
}
.page-legale th{color:var(--creme);font-weight:600;font-size:12px;
  text-transform:uppercase;letter-spacing:.05em}
.page-legale td{color:var(--creme-doux)}

/* Les trois liens du bas de page. */
footer .liens-legaux{
  margin-top:12px;display:flex;gap:6px 20px;
  justify-content:center;flex-wrap:wrap;
}
footer .liens-legaux a{color:var(--creme-doux);font-size:11px}
footer .liens-legaux a:hover,footer .liens-legaux a:focus{color:var(--creme)}