/* =============================================================
   Altivex — feuille de style principale
   Palette derivee du logo : navy #0B3C86, bleu #0A79C4, cyan #00B8E8
   Sommaire :
     1. Jetons de couleur (clair / sombre)
     2. Multilingue et RTL arabe
     3. Base et typographie
     4. Barre de navigation
     5. Surfaces navy
     6. Hero
     7. Sections, cartes, etapes, secteurs
     8. Contact et pied de page
     9. Animations et accessibilite
    10. Points de rupture
   ============================================================= */

/* ---------- tokens : clair (defaut) ---------- */
:root{
  --navy-950:#05142C;
  --navy-900:#08234A;
  --navy:#0B3C86;
  --blue:#0A79C4;
  --cyan:#00B8E8;
  --cyan-hi:#3ADCFF;

  --paper:#F4F7FB;
  --surface:#FFFFFF;
  --surface-2:#EAF0F8;
  --ink:#08182F;
  --ink-2:#33465E;
  --muted:#5C6E86;
  --line:#DBE4EF;

  --on-dark:#EAF2FB;
  --on-dark-2:#A9C0DA;

  --shadow:0 1px 2px rgba(8,24,47,.05), 0 12px 32px -12px rgba(8,24,47,.14);
  --radius:3px;
  --glyph-1:#0B3C86;--glyph-2:#00B8E8;--glyph-3:#0A79C4;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#060F1E;
    --surface:#0B1728;
    --surface-2:#111F35;
    --ink:#E8F0F9;
    --ink-2:#B7C7DA;
    --muted:#8798AC;
    --line:#1D2D45;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -14px rgba(0,0,0,.7);
    --glyph-1:#6FA8E8;--glyph-2:#3ADCFF;--glyph-3:#4FB4F0;
  }
}
:root[data-theme="dark"]{
  --paper:#060F1E;
  --surface:#0B1728;
  --surface-2:#111F35;
  --ink:#E8F0F9;
  --ink-2:#B7C7DA;
  --muted:#8798AC;
  --line:#1D2D45;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -14px rgba(0,0,0,.7);
    --glyph-1:#6FA8E8;--glyph-2:#3ADCFF;--glyph-3:#4FB4F0;
}

/* ---------- multilingue ---------- */
:root[data-lang="fr"] .en,:root[data-lang="fr"] .ar{display:none}
:root[data-lang="en"] .fr,:root[data-lang="en"] .ar{display:none}
:root[data-lang="ar"] .fr,:root[data-lang="ar"] .en{display:none}

/* ---------- arabe : typographie et RTL ---------- */
:root[data-lang="ar"] body{
  font-family:"IBM Plex Sans Arabic","Barlow",sans-serif;
  line-height:1.85;
}
:root[data-lang="ar"] h1,
:root[data-lang="ar"] h2,
:root[data-lang="ar"] h3,
:root[data-lang="ar"] h4{
  font-family:"IBM Plex Sans Arabic",sans-serif;
  font-weight:700;letter-spacing:normal;line-height:1.42;
}
/* l'interlettrage casse la ligature arabe : il doit etre neutralise partout */
:root[data-lang="ar"] .eyebrow,
:root[data-lang="ar"] .trust,
:root[data-lang="ar"] .step .n,
:root[data-lang="ar"] .contact-row .k,
:root[data-lang="ar"] .btn,
:root[data-lang="ar"] .lang{letter-spacing:normal}
:root[data-lang="ar"] .eyebrow,
:root[data-lang="ar"] .trust,
:root[data-lang="ar"] .contact-row .k{
  font-family:"IBM Plex Sans Arabic",sans-serif;
  text-transform:none;font-size:13.5px;font-weight:500;
}
:root[data-lang="ar"] .btn{font-family:"IBM Plex Sans Arabic",sans-serif;font-weight:600}
:root[data-lang="ar"] .hero h1{max-width:22ch;line-height:1.38}
:root[data-lang="ar"] .hero-sub{max-width:52ch}
/* le ruban et les degrades directionnels se mirroitent avec la mise en page */
:root[data-lang="ar"] .ribbon{transform:scaleX(-1)}
:root[data-lang="ar"] .btn-primary{background-image:linear-gradient(260deg,var(--navy),var(--blue) 62%,var(--cyan))}
:root[data-lang="ar"] .card::after{background:linear-gradient(270deg,var(--navy),var(--cyan))}
:root[data-lang="ar"] .step .n{font-family:"IBM Plex Mono",monospace}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:"Archivo","Barlow",sans-serif;
  font-weight:800;
  letter-spacing:-.022em;
  line-height:1.08;
  text-wrap:balance;
  margin:0;
}
p{margin:0}
a{color:inherit}

.shell{max-width:1180px;margin:0 auto;padding:0 28px}
.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue);
}
.on-navy .eyebrow{color:var(--cyan-hi)}

/* ---------- nav ---------- */
header.nav{
  position:sticky;top:0;z-index:60;
  background:var(--paper);
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex;align-items:center;gap:28px;height:74px}
.brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.brand img{height:34px;width:auto;display:block}
.brand .logo-light{display:none}
:root[data-theme="dark"] .brand .logo-dark{display:none}
:root[data-theme="dark"] .brand .logo-light{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .brand .logo-dark{display:none}
  :root:not([data-theme="light"]) .brand .logo-light{display:block}
}
.nav-links{display:flex;gap:26px;margin-inline-start:auto;align-items:center}
.nav-links a{
  text-decoration:none;font-size:15px;font-weight:500;color:var(--ink-2);
  padding:6px 0;border-bottom:2px solid transparent;transition:color .18s,border-color .18s;
}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--navy);border-bottom-color:var(--cyan)}
.nav-tools{display:flex;align-items:center;gap:12px}
.lang{
  display:flex;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.06em;
}
.lang button{
  appearance:none;border:0;background:transparent;color:var(--muted);
  padding:6px 9px;cursor:pointer;font:inherit;transition:background .18s,color .18s;
}
.lang button[aria-pressed="true"]{background:var(--navy);color:#fff}
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:"Archivo",sans-serif;font-weight:700;font-size:14.5px;letter-spacing:.005em;
  padding:11px 20px;border-radius:var(--radius);text-decoration:none;
  border:1.5px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .18s, box-shadow .18s, background .18s, color .18s;
}
.btn-primary{background-color:var(--navy);background-image:linear-gradient(100deg,var(--navy),var(--blue) 62%,var(--cyan));color:#fff}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 24px -8px rgba(10,121,196,.65)}
.btn-ghost{border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--blue);color:var(--navy)}
.on-navy .btn-ghost{border-color:rgba(255,255,255,.32);color:#fff}
.on-navy .btn-ghost:hover{border-color:var(--cyan-hi);color:var(--cyan-hi)}
.nav-burger{display:none}

/* ---------- surfaces sombres ---------- */
.on-navy{
  position:relative;
  /* La couleur est declaree SEPAREMENT du degrade : si un navigateur
     n'analyse pas l'un des radial-gradient, la declaration background-image
     entiere devient invalide et le fond deviendrait transparent — soit du
     texte blanc sur fond clair. Le mot-cle "ellipse" est explicite pour la
     meme raison (Safari rejette une taille a deux valeurs sans lui). */
  background-color:var(--navy-950);
  background-image:
    radial-gradient(ellipse 120% 90% at 82% 8%, rgba(0,184,232,.20), rgba(0,184,232,0) 58%),
    radial-gradient(ellipse 90% 80% at 6% 92%, rgba(11,60,134,.55), rgba(11,60,134,0) 60%),
    linear-gradient(168deg, var(--navy-950), var(--navy-900) 58%, #0A2C5E);
  color:var(--on-dark);
  overflow:hidden;
}
.on-navy h1,.on-navy h2,.on-navy h3{color:#fff}
.on-navy p{color:var(--on-dark-2)}

/* ruban diagonal — motif issu du logo */
.ribbon{position:absolute;inset:0;pointer-events:none;opacity:.5}
.ribbon svg{width:100%;height:100%;display:block}

/* ---------- hero ---------- */
.hero{padding:104px 0 96px}
.hero .shell{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center}
.hero h1{font-size:clamp(34px,4.4vw,56px);margin:18px 0 22px;max-width:16ch}
.hero h1 .accent{
  color:var(--cyan-hi);
}
/* Le texte ne devient transparent que si le navigateur sait vraiment
   decouper le degrade sur les glyphes. Sinon il reste cyan et lisible. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1 .accent{
    background-image:linear-gradient(96deg,var(--cyan-hi),var(--cyan) 45%,#7FE6FF);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
}
.hero-sub{font-size:19px;max-width:56ch;margin-bottom:34px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px}
.hero-mark{display:flex;justify-content:center;align-items:center}
.hero-mark img{
  width:min(300px,72%);height:auto;display:block;
  filter:drop-shadow(0 24px 60px rgba(0,184,232,.35));
}
.trust{
  margin-top:64px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:14px 46px;
  font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--on-dark-2);
}
.trust > span{display:flex;align-items:center;gap:9px}
.trust > span::before{content:"";width:6px;height:6px;background:var(--cyan);flex:0 0 auto;transform:rotate(45deg)}

/* ---------- sections ---------- */
section{padding:96px 0}
.sec-head{max-width:62ch;margin-bottom:52px}
.sec-head h2{font-size:clamp(28px,3.6vw,42px);margin:14px 0 16px}
.sec-head p{font-size:18px;color:var(--muted)}
.on-navy .sec-head p{color:var(--on-dark-2)}

/* cartes expertise */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.card{
  background:var(--surface);padding:34px 30px 36px;
  position:relative;transition:background .22s;
}
.card::after{
  content:"";position:absolute;inset-inline-start:0;top:0;width:0;height:3px;
  background:linear-gradient(90deg,var(--navy),var(--cyan));transition:width .32s ease;
}
.card:hover::after{width:100%}
.card:hover{background:var(--surface-2)}
.card .glyph{margin-bottom:20px}
.card h3{font-size:19px;margin-bottom:11px;color:var(--ink)}
.card p{font-size:15.5px;color:var(--muted);line-height:1.6}

/* approche */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:34px}
.step{border-top:2px solid rgba(255,255,255,.2);padding-top:20px;position:relative}
.step .n{
  font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.14em;
  color:var(--cyan-hi);display:block;margin-bottom:12px;
}
.step h3{font-size:18px;margin-bottom:10px}
.step p{font-size:15.5px;line-height:1.58}

/* secteurs */
.sectors{display:flex;flex-wrap:wrap;gap:10px}
.sectors li{
  list-style:none;
  border:1px solid var(--line);background:var(--surface);
  padding:9px 16px;border-radius:999px;font-size:15px;color:var(--ink-2);
  transition:border-color .2s,color .2s;
}
.sectors li:hover{border-color:var(--blue);color:var(--navy)}

/* pourquoi */
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:38px;margin-top:8px}
.why-item{padding-inline-start:20px;border-inline-start:2px solid var(--cyan)}
.why-item h3{font-size:19px;margin-bottom:10px;color:var(--ink)}
.why-item p{font-size:15.5px;color:var(--muted)}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:64px;align-items:start}

/* contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:start}
.contact-list{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.contact-row{
  display:flex;gap:18px;align-items:baseline;padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.13);
}
.contact-row .k{
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--on-dark-2);flex:0 0 108px;
}
.contact-row .v{font-size:17px;color:#fff;font-weight:500}
.contact-row a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
.contact-row a:hover{border-bottom-color:var(--cyan-hi);color:var(--cyan-hi)}

footer{padding:34px 0;border-top:1px solid rgba(255,255,255,.13)}
.foot-in{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.foot-in img{height:28px;width:auto;opacity:.95}
.foot-in p{font-size:13.5px;color:var(--on-dark-2)}

/* reveal */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1;transform:none;transition:none}
  .btn{transition:none}
}

:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:2px}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-mark{order:-1;justify-content:flex-start}
  .hero-mark img{width:150px}
  .split,.contact-grid{grid-template-columns:1fr;gap:40px}
  .nav-links{display:none}
  section{padding:72px 0}
  .hero{padding:72px 0 68px}
}
@media (max-width:560px){
  body{font-size:16px}
  .shell{padding:0 20px}
  .nav-in{height:64px;gap:12px}
  .brand img{height:26px}
  .nav-tools{gap:8px;margin-left:auto}
  .nav-tools .btn-primary{padding:9px 13px;font-size:13px}
  .lang button{padding:5px 7px;font-size:11px}
  .hero-mark img{width:118px}
}