/* ═══════════════════════════════════════════════════════
   AXIOMS SOLUTIONS — style.css v4
   Registre : plan d'exécution ferroviaire.
   Traits, cotes, cartouches. Aucune ombre, aucun mouvement gratuit.
   ═══════════════════════════════════════════════════════ */

/* TODO — auto-héberger les polices en /assets/fonts/*.woff2 et supprimer
   le lien Google Fonts de l'index. Un site qui casse parce que le réseau
   du client bloque Google est un site qui échoue au moment où il compte. */

:root{
  /* Bleus — issus du dégradé du logo */
  --cyan:      #34B1E4;   /* accent : liens, chiffres, filets, survols */
  --cyan-d:    #1A8BBF;
  --blue:      #0A4A6E;   /* aplats institutionnels */
  --navy:      #0A2540;   /* fonds sombres */
  --navy-2:    #0E3259;

  /* Neutres */
  --paper:     #FFFFFF;
  --paper-2:   #F5F8FA;
  --rule:      #DFE6ED;   /* filet fin */
  --rule-2:    #C3CFDA;
  --ink:       #12202E;
  --ink-2:     #5A6A7A;
  --ink-3:     #8A9BAE;

  --font:  'Inter', system-ui, -apple-system, sans-serif;
  --cond:  'Barlow Condensed', 'Arial Narrow', sans-serif;
  --mono:  ui-monospace, 'SF Mono', 'Roboto Mono', Menlo, monospace;

  --tr: 140ms ease;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{font-family:var(--font);font-size:16.5px;line-height:1.62;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

.container{max-width:1240px;margin:0 auto;padding:0 24px}
@media(min-width:900px){.container{padding:0 40px}}

/* ── Primitives typographiques ───────────────────────── */
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.eyebrow--dim{color:var(--ink-3)}

h1,h2,h3{font-family:var(--cond);line-height:1.08;letter-spacing:.005em}
h2{font-size:clamp(2rem,3.4vw,2.9rem);font-weight:700;color:var(--navy);text-transform:uppercase}
h3{font-size:1.3rem;font-weight:600;color:var(--navy)}

.lede{color:var(--ink-2);max-width:62ch;font-size:1.05rem}
.data{font-family:var(--mono);font-size:.78rem;letter-spacing:.02em}

/* ── LE RAIL — élément signature ──────────────────────
   Deux filets parallèles ponctués de traverses. Sert de
   séparateur de section et de soulignement de titre.      */
.rail{height:9px;position:relative;margin:0}
.rail::before,.rail::after{content:'';position:absolute;left:0;right:0;height:1px;background:var(--rule-2)}
.rail::before{top:0}.rail::after{bottom:0}
.rail span{position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,var(--rule-2) 0 1px,transparent 1px 14px)}
.rail--accent::before,.rail--accent::after{background:var(--cyan)}
.rail--accent span{background-image:repeating-linear-gradient(90deg,var(--cyan) 0 1px,transparent 1px 14px)}
.rail--short{width:72px}
.rail--dark::before,.rail--dark::after{background:rgba(255,255,255,.28)}
.rail--dark span{background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 1px,transparent 1px 14px)}

.sec-head{margin-bottom:48px;max-width:70ch}
.sec-head h2{margin:10px 0 14px}
.sec-head .rail{margin-bottom:18px}

/* ── Boutons ─────────────────────────────────────────── */
.btn{display:inline-block;padding:14px 26px;border-radius:2px;font-weight:600;font-size:.9rem;
     letter-spacing:.05em;text-transform:uppercase;transition:background var(--tr),border-color var(--tr),color var(--tr)}
.btn-primary{background:var(--cyan);color:#04212F}
.btn-primary:hover{background:#fff}
.btn-ghost{border:1px solid rgba(255,255,255,.45);color:#fff}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.btn-dark{border:1px solid var(--blue);color:var(--blue)}
.btn-dark:hover{background:var(--blue);color:#fff}
.btn-full{display:block;width:100%;text-align:center;background:var(--navy);color:#fff;border:none}
.btn-full:hover{background:var(--blue)}

/* ═══════ NAVIGATION ═══════ */
#header{position:fixed;top:0;left:0;right:0;z-index:100;background:transparent;
        border-bottom:1px solid transparent;transition:background var(--tr),border-color var(--tr)}
#header.solid{background:rgba(10,37,64,.97);border-bottom-color:rgba(255,255,255,.12)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.nav-logo-img{height:44px;width:auto}
.nav-links{display:none;align-items:center;gap:4px}
@media(min-width:1000px){.nav-links{display:flex}}
.nav-links a{padding:9px 14px;font-size:.85rem;font-weight:500;color:rgba(255,255,255,.78);transition:color var(--tr)}
.nav-links a:hover{color:#fff}
.nav-cta{border:1px solid var(--cyan);color:var(--cyan)!important;border-radius:2px;margin-left:10px}
.nav-cta:hover{background:var(--cyan);color:#04212F!important}
.burger{display:flex;flex-direction:column;gap:5px;padding:8px}
@media(min-width:1000px){.burger{display:none}}
.burger span{display:block;width:22px;height:2px;background:#fff}
body.nav-open .nav-links{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;
  align-items:stretch;background:var(--navy);padding:12px 24px 24px;border-bottom:1px solid rgba(255,255,255,.12)}
body.nav-open .nav-links a{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08)}
body.nav-open .nav-cta{margin:12px 0 0;text-align:center;padding:13px}

/* ═══════ HERO ═══════ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;background:var(--navy);overflow:hidden}
.hero-photo{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.28;filter:grayscale(.55)}
.hero-grid{position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent)}
.hero-veil{position:absolute;inset:0;background:linear-gradient(105deg,rgba(10,37,64,.95) 0%,rgba(10,37,64,.72) 55%,rgba(10,37,64,.55) 100%)}
.hero-content{position:relative;z-index:2;padding:120px 0 88px;width:100%}
.hero-content .rail{width:120px;margin-bottom:26px}
.hero-eyebrow{display:block;margin-bottom:14px}
.hero-title{font-family:var(--cond);font-weight:700;text-transform:uppercase;color:#fff;
  font-size:clamp(2.6rem,6.6vw,5.4rem);line-height:.98;letter-spacing:.01em}
.hero-title em{font-style:normal;color:var(--cyan)}
.hero-sub{color:rgba(255,255,255,.8);max-width:56ch;margin:24px 0 34px;font-size:1.08rem}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}

/* Chaîne kilométrique en pied de hero */
.hero-chain{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.14);padding:18px 0}
.hero-chain-in{display:flex;flex-wrap:wrap;gap:10px 34px;align-items:center}
.hero-chain span{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.hero-chain b{color:var(--cyan);font-weight:500}

/* ═══════ CHIFFRES ═══════ */
.stats{background:var(--navy);padding:0 0 56px}
.stats-row{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,255,255,.13)}
@media(min-width:900px){.stats-row{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--navy);padding:34px 26px}
.stat-n{display:block;font-family:var(--cond);font-size:clamp(2.6rem,5vw,3.6rem);font-weight:700;color:var(--cyan);line-height:1}
.stat-n sup{font-size:.42em;vertical-align:super;margin-left:2px}
.stat-l{display:block;margin-top:10px;font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;
        text-transform:uppercase;color:rgba(255,255,255,.55)}
.stat-note{display:block;margin-top:6px;font-size:.78rem;color:rgba(255,255,255,.38)}

/* ═══════ SECTIONS ═══════ */
.section{padding:88px 0}
@media(min-width:900px){.section{padding:112px 0}}
.section--alt{background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.section--dark{background:var(--navy);color:#fff}
.section--dark h2{color:#fff}
.section--dark .lede{color:rgba(255,255,255,.7)}

/* ── À propos ── */
.about{display:grid;gap:56px}
@media(min-width:1000px){.about{grid-template-columns:1.05fr .95fr;gap:72px;align-items:start}}
.about p+p{margin-top:16px}
.about p{color:var(--ink-2)}
.about-offices{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);margin-top:34px;border:1px solid var(--rule)}
.office{background:var(--paper);padding:20px 22px}
.office .data{color:var(--ink-3);display:block;margin-bottom:6px}
.office strong{font-family:var(--cond);font-size:1.5rem;font-weight:600;color:var(--navy);display:block;line-height:1.1}
.office span.c{font-size:.85rem;color:var(--ink-2)}
.mosaic{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mosaic img{width:100%;height:100%;object-fit:cover;border:1px solid var(--rule)}
.mosaic img:first-child{grid-column:1/-1;aspect-ratio:16/9}
.mosaic img:not(:first-child){aspect-ratio:4/3}

/* ── Chaîne de valeur (séquence réelle → numérotation légitime) ── */
.chain{margin-top:72px;border-top:1px solid var(--rule);padding-top:44px}
.chain-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media(min-width:760px){.chain-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.chain-grid{grid-template-columns:repeat(6,1fr)}}
.link{background:var(--paper);padding:22px 18px 24px;position:relative}
.link-n{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;color:var(--cyan)}
.link h4{font-family:var(--cond);font-size:1.15rem;font-weight:600;color:var(--navy);text-transform:uppercase;margin:8px 0 6px;line-height:1.15}
.link p{font-size:.82rem;color:var(--ink-2);line-height:1.5}

/* ── Métiers ── */
.jobs{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media(min-width:760px){.jobs{grid-template-columns:1fr 1fr}}
.job{background:var(--paper);padding:34px 30px 36px;transition:background var(--tr)}
.job:hover{background:var(--paper-2)}
.job h3{text-transform:uppercase;font-size:1.45rem;margin:12px 0 16px}
.job ul li{position:relative;padding-left:18px;font-size:.92rem;color:var(--ink-2);padding-bottom:7px}
.job ul li::before{content:'';position:absolute;left:0;top:11px;width:8px;height:1px;background:var(--cyan)}
.job-note{margin-top:18px;padding-top:14px;border-top:1px dashed var(--rule-2);font-size:.84rem;color:var(--ink)}
.job-note b{color:var(--blue)}

/* ── Domaines ── */
.domains{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,255,255,.14);margin-top:8px}
@media(min-width:760px){.domains{grid-template-columns:repeat(4,1fr)}}
.domain{background:var(--navy);padding:26px 22px}
.domain .data{color:var(--cyan);display:block;margin-bottom:8px}
.domain strong{font-family:var(--cond);font-size:1.35rem;font-weight:600;text-transform:uppercase;color:#fff;display:block;line-height:1.15}

/* ═══════ RÉFÉRENCES ═══════ */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.filters-lbl{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
             color:var(--ink-3);width:100%;margin-bottom:2px}
.fbtn{padding:8px 14px;border:1px solid var(--rule-2);border-radius:2px;font-size:.82rem;font-weight:500;
      color:var(--ink-2);transition:all var(--tr)}
.fbtn:hover{border-color:var(--blue);color:var(--blue)}
.fbtn.active{background:var(--navy);border-color:var(--navy);color:#fff}
.filters + .filters{margin-bottom:34px}
.count{font-family:var(--mono);font-size:.75rem;color:var(--ink-3);margin-bottom:22px;display:block}

.projects{display:grid;gap:16px}
@media(min-width:700px){.projects{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.projects{grid-template-columns:repeat(3,1fr)}}

/* LE CARTOUCHE — carte projet en forme de cartouche de plan */
.pj{border:1px solid var(--rule);background:var(--paper);display:flex;flex-direction:column;
    transition:border-color var(--tr)}
.pj:hover{border-color:var(--cyan)}
.pj-hd{display:flex;justify-content:space-between;align-items:center;gap:10px;
       padding:9px 16px;border-bottom:1px solid var(--rule);background:var(--paper-2)}
.pj-hd .data{color:var(--ink-3)}
.pj-mode{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);font-weight:500}
.pj-bd{padding:20px 16px 8px;flex:1}
.pj h3{font-size:1.28rem;text-transform:uppercase;line-height:1.12;margin-bottom:10px}
.pj-mission{font-size:.92rem;color:var(--ink);font-weight:500;margin-bottom:8px}
.pj-desc{font-size:.86rem;color:var(--ink-2);line-height:1.5}
.pj-ft{border-top:1px solid var(--rule);display:grid;grid-template-columns:1fr auto}
.pj-cell{padding:11px 16px}
.pj-cell + .pj-cell{border-left:1px solid var(--rule)}
.pj-k{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.pj-v{display:block;font-size:.85rem;font-weight:600;color:var(--navy);margin-top:3px;white-space:nowrap}
.pj-v--km{color:var(--cyan-d);font-family:var(--mono);font-size:.88rem}
.pj[hidden]{display:none}

/* ═══════ CLIENTS ═══════ */
.logos{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media(min-width:620px){.logos{grid-template-columns:repeat(3,1fr)}}
@media(min-width:980px){.logos{grid-template-columns:repeat(5,1fr)}}
.logo-cell{background:var(--paper);display:flex;align-items:center;justify-content:center;padding:26px 20px;min-height:104px}
.logo-cell img{max-height:44px;width:auto;filter:grayscale(1);opacity:.62;transition:filter var(--tr),opacity var(--tr)}
.logo-cell:hover img{filter:none;opacity:1}
.logo-more{margin-top:22px;font-size:.88rem;color:var(--ink-2)}
.logo-more b{color:var(--navy);font-weight:600}

/* ═══════ CONTACT ═══════ */
.contact{display:grid;gap:44px}
@media(min-width:960px){.contact{grid-template-columns:1.15fr .85fr;gap:64px}}
.fg{margin-bottom:16px}
.fg label{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
          color:var(--ink-3);margin-bottom:6px}
.fg input,.fg select,.fg textarea{width:100%;padding:12px 14px;border:1px solid var(--rule-2);border-radius:2px;
  font:inherit;font-size:.95rem;color:var(--ink);background:var(--paper);transition:border-color var(--tr)}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-color:var(--cyan)}
.fg textarea{resize:vertical}
.form-row{display:grid;gap:16px}
@media(min-width:600px){.form-row{grid-template-columns:1fr 1fr}}
.form-msg{margin-top:12px;font-size:.88rem;color:var(--blue);min-height:20px}

.cbox{border:1px solid var(--rule);padding:22px 24px;margin-bottom:16px}
.cbox .data{color:var(--ink-3);display:block;margin-bottom:8px}
.cbox h4{font-family:var(--cond);font-size:1.45rem;font-weight:600;text-transform:uppercase;color:var(--navy);line-height:1.1}
.cbox p{font-size:.9rem;color:var(--ink-2);margin:4px 0 8px}
.cbox a{font-size:.9rem;color:var(--blue);font-weight:500;border-bottom:1px solid var(--rule-2)}
.cbox a:hover{color:var(--cyan-d);border-color:var(--cyan)}

/* ═══════ FOOTER ═══════ */
.footer{background:var(--navy);color:#fff;padding:60px 0 30px}
.footer-in{display:grid;gap:34px}
@media(min-width:860px){.footer-in{grid-template-columns:1.4fr 1fr 1fr;gap:56px}}
.footer img{height:52px;opacity:.9;margin-bottom:16px}
.footer p{font-size:.88rem;color:rgba(255,255,255,.55);line-height:1.7}
.footer h5{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
           color:var(--cyan);margin-bottom:14px}
.footer nav{display:flex;flex-direction:column;gap:9px}
.footer nav a{font-size:.9rem;color:rgba(255,255,255,.72);transition:color var(--tr)}
.footer nav a:hover{color:var(--cyan)}
.footer-btm{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
            display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}
.footer-btm span{font-family:var(--mono);font-size:.72rem;color:rgba(255,255,255,.4)}