/* ═══════════════════════════════════════════════════════════════════════
   POLICE DE LA MARQUE
   La V1 declarait « font-family:Inter » sans charger Inter nulle part : ni
   @font-face, ni <link>. Absente de la quasi-totalite des machines, elle
   retombait sur Arial — chaque visiteur voyait une autre typographie que
   celle prevue.
   Elle est desormais hebergee ici meme. Ce n'est pas un detail de confort :
   la CSP du fichier _headers impose « font-src 'self' », donc un appel a
   Google Fonts serait purement et simplement bloque. L'auto-hebergement
   est la seule option coherente avec la securite du site — et il evite en
   prime d'annoncer chaque visiteur a un tiers.
   Fichier : Inter 4.001, sous licence SIL Open Font License (voir
   assets/inter-LICENCE.txt, livraison exigee par la licence). Reduite de
   344 Ko a 45 Ko en ne gardant que le repertoire latin occidental et les
   graisses 400 a 900. Le nom du fichier porte la version : le cache d'un
   an pose sur /assets/* est « immutable », seul un nouveau nom le renouvelle.
   ═══════════════════════════════════════════════════════════════════════ */
@font-face{
  font-family:'Inter';
  src:url('/assets/inter-var-4001.woff2') format('woff2');
  /* Une seule requete couvre les quatre graisses du site (400/700/800/900) :
     c'est une police variable, la graisse est un curseur, pas un fichier. */
  font-weight:400 900;
  font-style:normal;
  /* « swap » : le texte s'affiche tout de suite dans la police de repli, puis
     bascule. Le defaut (« auto ») laisse un blanc de 3 s sur reseau lent —
     inacceptable pour un site institutionnel consulte depuis Niamey. */
  font-display:swap;
}

/* ═══════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM AGEXER
   Jetons uniques du site. Aucune couleur, taille ou espacement ne doit
   exister hors de ce bloc : c'est ce qui permet de faire evoluer l'identite
   sans relire chaque regle.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* — Marque ————————————————————————————————————————————————— */
  --green:#073d36;          /* vert institutionnel : en-tetes, primaire */
  --green2:#0c5146;         /* survol du primaire */
  --green-clair:#0b4e43;    /* degrade du heros */
  --gold:#d4a017;           /* accent : filets, accroches sur fond sombre */
  /* Or ASSOMBRI, reserve au texte sur fond clair. L'or de marque tombe a
     2,38:1 sur blanc — sous le seuil AA de 4,5:1. Celui-ci atteint 5,37:1
     sur blanc et 4,99:1 sur le fond doux des sections alternees, sans
     trahir la teinte. (Le chiffre de 4,6:1 note en phase 2 etait errone :
     il provenait d'une estimation, non d'un calcul.) */
  --gold-texte:#8a6410;
  /* Valeur d'origine de la V1, retablie : la reecriture du bloc en phase 2
     l'avait remplacee par « var(--navy) », une reference circulaire. Une
     variable qui s'appelle elle-meme est invalide, se declare sans erreur,
     et fait retomber la couleur sur l'heritage — TRACE s'affichait en noir
     de texte courant pendant que SANEX restait vert. */
  --navy:#102a43;           /* identite TRACE, jamais employe ailleurs */
  /* Identite VERIDY. TRACE et VERIDY partagent la meme charte produit
     (#1B365D) : les distinguer par cette teinte les rendrait jumeaux a
     l'oeil. On reprend donc la seule couleur franche de la charte VERIDY,
     celle du tampon de verification — c'est-a-dire de ce que fait le
     produit. Voir la note en fin de fichier. */
  --violet:#6b3fa0;         /* identite VERIDY, jamais employe ailleurs */

  /* — Neutres —————————————————————————————————————————————— */
  --ink:#0c2422;            /* texte principal — 16,3:1 sur blanc */
  --ink-2:#4a5a57;          /* texte secondaire — 7,4:1 sur blanc */
  --surface:#ffffff;
  --soft:#f5f7f6;           /* fond de section alternee */
  --line:#dfe7e4;           /* filets et bordures */

  /* — Police ————————————————————————————————————————————————
     Le repli n'est pas Arial mais la police du systeme : SF Pro sur Apple,
     Segoe UI sur Windows, Roboto sur Android. Toutes ont une hauteur d'x
     proche de celle d'Inter, donc la bascule au chargement se voit a peine.
     Arial ne reste qu'en dernier recours. */
  --police:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* — Echelle typographique ————————————————————————————————
     Raison ~1,25 (quarte mineure) : assez contrastee pour hierarchiser,
     assez serree pour rester sobre. Sept niveaux, plus rien sous 12 px. */
  --t-display:48px;         /* H1 du heros */
  --t-h2:34px;              /* titres de section */
  --t-h3:20px;              /* titres de carte */
  --t-large:18px;           /* chapo */
  --t-body:16px;            /* texte courant */
  --t-small:14px;           /* legendes, navigation */
  --t-caption:12px;         /* accroches en capitales */

  /* — Espacement, base 8 ——————————————————————————————————— */
  --e1:8px; --e2:16px; --e3:24px; --e4:32px; --e6:48px; --e8:64px; --e12:96px;

  /* — Rayons ————————————————————————————————————————————————
     Un seul principe : plus la surface est grande, plus le rayon l'est. */
  --r-controle:7px;         /* boutons, champs */
  --r-carte:14px;           /* cartes */

  /* — Ombres : sobres, une seule elevation —————————————————— */
  --ombre-carte:0 1px 3px rgba(7,61,54,.07);
  --ombre-relief:0 12px 26px rgba(7,61,54,.10);

  /* — Focus : un seul halo, visible sur clair comme sur sombre ———— */
  --halo-focus:0 0 0 3px rgba(212,160,23,.55);

  /* — Mouvement : court, jamais decoratif ——————————————————— */
  --duree:160ms;
}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:var(--police);color:var(--ink);background:var(--surface)}a{color:inherit;text-decoration:none}.topbar{height:84px;display:flex;align-items:center;gap:28px;padding:0 4.5%;position:sticky;top:0;background:#fff;z-index:20;border-bottom:1px solid #eee}.brand{display:flex;align-items:center;gap:12px;margin-right:auto}.brand .mark{width:48px;height:48px;display:grid;place-items:center;font-size:28px;font-weight:900;color:#fff;background:var(--green);clip-path:polygon(50% 0,100% 100%,76% 100%,50% 45%,24% 100%,0 100%)}.brand strong{font-size:22px;letter-spacing:.5px}.brand small{font-size:var(--t-caption);text-transform:uppercase;display:inline-block;margin-left:10px;line-height:1.3}.topbar nav{display:flex;gap:27px;font-size:var(--t-small)}.topbar nav a:hover{color:var(--green2)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 20px;border-radius:7px;font-weight:700;font-size:var(--t-small)}.primary{background:var(--green);color:#fff}.gold{background:var(--gold);color:var(--ink)}.ghost{border:1px solid rgba(255,255,255,.7);color:#fff}.menu{display:none;background:none;border:0;font-size:22px;width:44px;height:44px;line-height:1;color:var(--ink);cursor:pointer;border-radius:var(--r-controle)}.hero{min-height:480px;background:linear-gradient(110deg,#053c34 0%,#073d36 57%,#0b4e43 100%);color:#fff;display:grid;grid-template-columns:1.15fr .85fr;overflow:hidden}.hero-copy{padding:70px 8% 65px 9%}.eyebrow{text-transform:uppercase;letter-spacing:2px;font-size:var(--t-caption);font-weight:800;color:var(--gold-texte)}
.hero .eyebrow,.cta .eyebrow{color:var(--gold)}.hero h1{font-size:var(--t-display);line-height:1.08;margin:12px 0 22px;max-width:760px}.hero h1 em{font-style:normal;color:var(--gold)}.hero-copy>p:not(.eyebrow){max-width:610px;line-height:1.7;color:#e8efed}.actions{display:flex;gap:14px;margin-top:30px}.hero-art{position:relative;background:radial-gradient(circle at 70% 40%,rgba(212,160,23,.18),transparent 22%),linear-gradient(135deg,rgba(255,255,255,.08),rgba(0,0,0,.15));display:grid;place-items:center}.hero-art:before,.hero-art:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.08);width:330px;height:330px;transform:rotate(30deg)}.hero-art:after{width:230px;height:230px}.seal{width:145px;height:145px;border:2px solid var(--gold);border-radius:50%;display:grid;place-items:center;font-size:74px;font-weight:900;color:var(--gold);z-index:2}.values{display:grid;grid-template-columns:repeat(4,1fr);max-width:1280px;margin:auto;padding:26px 5%;gap:25px}.values article{display:flex;gap:14px;align-items:center;border-right:1px solid var(--line)}.values article:last-child{border:0}.values b{font-size:28px;color:var(--green)}.values h3{margin:0 0 5px;text-transform:uppercase;font-size:var(--t-small)}.values p{margin:0;font-size:var(--t-caption);line-height:1.45}.section{padding:75px 8%;max-width:1440px;margin:auto}.section h2,.cta h2{font-size:var(--t-h2);margin:7px 0 22px}.intro>p:last-child{font-size:var(--t-large);line-height:1.8;max-width:1000px}.soft{background:var(--soft);max-width:none}.center{text-align:center}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e3);max-width:1200px;margin:38px auto 0}.card{border-radius:var(--r-carte);background:#fff;border:1px solid var(--line);padding:var(--e4);display:flex;flex-direction:column;align-items:flex-start;gap:var(--e2)}.product{font-size:28px;font-weight:900}.sanex .product{color:#14713e}.trace .product{color:var(--navy)}.veridy .product{color:var(--violet)}.card p{line-height:1.6;color:var(--ink-2)}.domains{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}.domains article{border:1px solid var(--line);padding:25px;border-radius:12px}.domains b{color:var(--gold-texte);font-size:var(--t-small)}.domains p{line-height:1.55;color:var(--ink-2)}.cta{background:var(--green);color:#fff;padding:55px 9%;display:flex;align-items:center;justify-content:space-between;gap:30px}.cta h2{margin-bottom:8px}footer{background:#062f2b;color:#fff;padding:45px 8% 25px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:45px;font-size:var(--t-small)}footer>div{display:flex;flex-direction:column;gap:10px}footer strong{font-size:var(--t-body)}.copyright{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.15);padding-top:20px;text-align:center;color:#bacbc7}@media(max-width:900px){.cards{grid-template-columns:1fr 1fr}.topbar nav,.contact-top{display:none}.menu{display:block}.topbar.open{height:auto;flex-wrap:wrap;padding-top:16px;padding-bottom:16px}.topbar.open nav{display:flex;order:4;flex-basis:100%;flex-direction:column;padding:var(--e1) 0;gap:0}.topbar.open nav a{padding:12px 0;min-height:44px;display:flex;align-items:center;border-bottom:1px solid var(--line)}.topbar.open nav a:last-child{border-bottom:0}.hero{grid-template-columns:1fr}.hero-copy{padding:55px 7%}.hero h1{font-size:36px}.hero-art{min-height:230px}.values,.domains{grid-template-columns:1fr 1fr}.cta{align-items:flex-start;flex-direction:column}}@media(max-width:560px){.brand small{display:none}.hero h1{font-size:var(--t-h2)}.values,.domains,.cards{grid-template-columns:1fr}.values article{border-right:0;border-bottom:1px solid var(--line);padding-bottom:16px}.section{padding:55px 6%}footer{grid-template-columns:1fr}.actions{flex-direction:column;align-items:flex-start}}
/* ── Page 404 ─────────────────────────────────────────────────────────────
   La variante « ghost » d'origine est blanche : pensée pour le héros vert,
   elle serait invisible ici, sur fond clair. */
.erreur{max-width:640px;padding-top:90px;padding-bottom:110px}
.erreur h1{font-size:var(--t-h2);margin:8px 0 16px}
/* :not(.eyebrow) — sans quoi cette regle (specificite 0-1-1) ecrase .eyebrow
   (0-1-0) et l'accroche perd sa couleur. Collision constatee au rendu. */
.erreur p:not(.eyebrow){line-height:1.7;color:var(--ink-2)}
.erreur .actions{margin-top:28px}
.ghost-sombre{border:1px solid var(--line);color:var(--ink)}

/* ═══════════════════════════════════════════════════════════════════════
   ÉTATS ET MOUVEMENT
   Ajoutés en phase 2 : la V1 n'avait ni focus, ni survol, ni transition.
   ═══════════════════════════════════════════════════════════════════════ */

/* — Focus clavier ————————————————————————————————————————————
   Point le plus grave de l'audit accessibilité : AUCUNE règle :focus
   n'existait. Une personne qui navigue au clavier ne savait pas où elle
   était. Le halo or fonctionne sur fond clair comme sur le vert du héros. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
  border-radius:var(--r-controle);
}

/* — Survol : le site paraissait figé ————————————————————————— */
.btn{transition:background var(--duree) ease,border-color var(--duree) ease,color var(--duree) ease}
.primary:hover{background:var(--green2)}
.gold:hover{background:#bf910f}
.ghost:hover{background:rgba(255,255,255,.12)}
.ghost-sombre:hover{background:var(--soft)}
.topbar nav a{transition:color var(--duree) ease}
.domains article,.card{transition:box-shadow var(--duree) ease,border-color var(--duree) ease}
.domains article:hover,.card:hover{border-color:#c7d6d1;box-shadow:var(--ombre-carte)}
footer a{transition:color var(--duree) ease}
footer a:hover{color:var(--gold)}

/* — L'en-tête collant recouvrait les titres à l'arrivée sur une ancre ——— */
html{scroll-padding-top:96px}

/* — Mouvement : respecter ceux qui le refusent ——————————————————
   « scroll-behavior:smooth » était déclaré sans garde : il provoque des
   nausées chez les personnes sensibles au mouvement vestibulaire. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}


/* — Lien d'évitement ————————————————————————————————————————
   Invisible à la souris, il apparaît à la première tabulation : il évite de
   parcourir toute la navigation avant d'atteindre le contenu. */
.evitement{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--green);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-controle) 0;
  font-size:var(--t-small);font-weight:700}
.evitement:focus{left:0}

/* — Titre présent pour les lecteurs d'écran, absent à l'œil ————————
   La section « valeurs » n'avait aucun H2 : ses quatre H3 succédaient
   directement au H1, ce qui désoriente un lecteur d'écran. Le titre existe
   désormais dans la structure sans alourdir la page visuellement. */
.visuellement-cache{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — phase 4
   La V1 n'avait que deux paliers (900 et 560) : rien entre les deux, alors
   qu'une tablette en portrait fait 768 ou 820 px. Les règles ci-dessous
   comblent ce trou et corrigent les hauteurs figées.
   ═══════════════════════════════════════════════════════════════════════ */

/* — Hauteurs automatiques ————————————————————————————————————
   L'en-tête et le héros avaient des hauteurs fixes (84 px, 480 px) : sur un
   petit écran, le héros occupait la moitié du défilement pour rien ; sur un
   grand, l'en-tête ne respirait pas. */
.topbar{height:auto;min-height:84px;padding-top:var(--e1);padding-bottom:var(--e1)}
.hero{min-height:auto}
.hero-copy{padding-top:var(--e8);padding-bottom:var(--e8)}

/* — Cartes de même hauteur, contenu aligné en haut ————————————
   Les cartes « domaines » étaient aux deux tiers vides : hauteur imposée,
   contenu centré. Le contenu commande désormais, et les cartes s'alignent. */
.domains article{display:flex;flex-direction:column;gap:var(--e1)}
.domains h3{margin:0}
.domains p{margin:0}
.card{min-height:0;align-items:start}

/* — Tablette portrait : le palier qui manquait —————————————————— */
@media (min-width:561px) and (max-width:900px){
  .hero h1{font-size:36px}
  /* Quatre colonnes de valeurs sur 768 px donnent 170 px chacune : illisible.
     Deux colonnes laissent respirer. */
  .values{grid-template-columns:1fr 1fr;gap:var(--e3)}
  .values article:nth-child(2){border-right:0}
  .domains{grid-template-columns:1fr 1fr}
  .section{padding-left:6%;padding-right:6%}
  .cta{padding-left:6%;padding-right:6%}
  footer{grid-template-columns:1fr 1fr;gap:var(--e4)}
  footer>div:first-child{grid-column:1/-1}
}

/* — Téléphone : le héros ne doit pas manger tout le premier écran ——— */
@media (max-width:560px){
  .hero-copy{padding-top:var(--e6);padding-bottom:var(--e6)}
  /* Le panneau décoratif du héros n'apporte rien sur un téléphone et coûte
     230 px de défilement avant le premier contenu utile. */
  .hero-art{min-height:150px}
  .seal{width:96px;height:96px;font-size:46px}
  .actions .btn{width:100%}
  /* Le pied en une colonne devenait une bande étroite illisible. */
  footer{gap:var(--e3)}
}

/* ── Heritage de la police par les controles ──────────────────────────────
   Les navigateurs n'appliquent PAS la police du document aux <button>,
   <input>, <select> et <textarea> : ils leur imposent leur propre police
   systeme. Sans cette regle, le bouton du menu resterait en dehors de la
   typographie du site — et tout futur formulaire de contact aussi.
   Specificite volontairement faible (0-0-1) : « .menu » et consorts, en
   0-1-0, gardent la main sur leur taille. */
button,input,select,textarea{font:inherit}

/* ── Rattrapage de contraste : numerotation des domaines ──────────────────
   Oubli de la phase 3, retrouve par un balayage exhaustif (et non plus par
   un echantillon d'elements choisis a la main) : les reperes « 01 » a « 04 »
   restaient en or de marque sur fond blanc, soit 2,38:1 la ou AA exige 4,5.
   Ils passent a l'or assombri, deja employe par les accroches sur fond clair
   — la teinte reste la, le contraste devient conforme. */

/* ── Sous-titre de marque : la derniere taille sous 12 px ─────────────────
   Le bloc de jetons affirme « plus rien sous 12 px ». C'etait faux : la
   denomination officielle, dans l'en-tete, restait a 11 px — precisement le
   texte qui identifie juridiquement l'agence. Elle passe a 12 px, la valeur
   « --t-caption ». Verifie a seize largeurs : la marque ne croise jamais la
   navigation. */

/* ═══════════════════════════════════════════════════════════════════════
   PHASE 5 — SECTION « NOS SOLUTIONS »
   La V1 presentait deux produits par des phrases interchangeables, flanquees
   d'un rectangle gris qui se contentait de repeter le nom du produit. Le
   rectangle est supprime : il occupait 45 % de la carte sans rien apprendre,
   et il interdisait de passer a trois colonnes.
   Chaque carte dit maintenant le PROBLEME avant le GESTE. C'est ce qui rend
   trois produits distinguables : decrits par leurs fonctions, ils se
   ressemblent tous ; decrits par le probleme qu'ils resolvent, jamais.
   ═══════════════════════════════════════════════════════════════════════ */

/* Le probleme est en encre pleine et en demi-gras : c'est la phrase que le
   lecteur doit retenir s'il n'en lit qu'une. La suite est en encre
   secondaire. La graisse 600 existe : la police est variable, 400 a 900. */
.card .probleme{color:var(--ink);font-weight:600;line-height:1.55;margin:0}
.card h3{margin:0;font-size:var(--t-h3)}
.card p{margin:0;line-height:1.6;color:var(--ink-2);max-width:52ch}
/* 52ch et non 62 : l'unite « ch » mesure la largeur du chiffre zero, plus
   large que la moyenne des lettres. 62ch laissaient passer 78 signes par
   ligne — mesure faite, pas estimee. 52ch en donnent environ 65. */

/* « margin-top:auto » pousse le lien au bas de la carte. Les cartes d'une
   meme rangee etant etirees a la meme hauteur par la grille, les trois
   boutons s'alignent quelle que soit la longueur des textes. */
.lien-carte{margin-top:auto}

/* ── Note sur la couleur de VERIDY ────────────────────────────────────────
   La charte du produit reserve ce violet au tampon de verification et a son
   verdict. L'employer ici comme couleur de nom est une extension de cet
   usage, faite en connaissance de cause : sur cette page, VERIDY doit se
   distinguer de TRACE, dont il partage la charte. A revoir si le produit se
   dote d'une couleur de nom propre.
   Contraste des trois noms sur le fond doux des sections alternees :
   SANEX 5,64:1 · TRACE 13,61:1 · VERIDY 6,86:1 — seuil 3,0 (28 px, 900).
   Les trois se separent par la teinte, non par la clarte ; le nom restant
   ecrit en toutes lettres, la couleur n'est jamais seule porteuse de sens. */

/* ── Paliers de la grille Solutions ───────────────────────────────────────
   Les paliers generaux du site (900 px, 560 px) ne conviennent pas ici : la
   mesure a montre que la colonne de texte n'y depassait jamais 40 signes par
   ligne, et que le passage a trois colonnes a 901 px l'AGGRAVAIT — on tombait
   de 40 a 21 signes. Ces paliers-ci sont donc calcules sur la largeur de
   texte obtenue, non sur des chiffres ronds. Places en fin de fichier, ils
   l'emportent sur les regles generales a specificite egale. */
@media(max-width:1399px){.cards{grid-template-columns:1fr 1fr}}
@media(max-width:899px){.cards{grid-template-columns:1fr}}
/* Sous 480 px, le rembourrage de 32 px de chaque cote prenait un quart de
   l'ecran : la ligne tombait a 27 signes. Il passe a 24 px. */
@media(max-width:479px){.card{padding:var(--e3)}}

/* ── Avis « site en construction » ────────────────────────────────────────
   Place sur les deux pages legales, qui sont les pages reellement
   incompletes, et rappele en pied de page d'accueil. Pas de bandeau en tete
   d'accueil : sur un site institutionnel, il desservirait le serieux de
   l'ensemble alors que seules deux pages sont concernees.
   role="note" plutot que "alert" : un lecteur d'ecran doit l'annoncer quand
   il y arrive, pas interrompre la lecture pour le dire. */
.avis{
  border-left:4px solid var(--gold-texte);
  background:#fdf6e7;                 /* or tres dilue, meme famille que l'accent */
  padding:var(--e3);
  border-radius:0 var(--r-controle) var(--r-controle) 0;
  margin:0 0 var(--e4);
  max-width:62ch;
}
.avis strong{
  display:block;
  color:var(--gold-texte);            /* 4,99:1 sur ce fond — mesure, non estime */
  text-transform:uppercase;
  letter-spacing:1.5px;
  font-size:var(--t-caption);
  margin-bottom:var(--e1);
}
.avis p{margin:0;line-height:1.6;color:var(--ink)}