/* Shared by every page: header, footer, cookie banner, inner pages, request form */
:root{
  --navy:#0B1B4D;--blue:#0B5CFF;--blue-dark:#0847CC;--sky:#3B8CFF;
  --ink:#0B1B33;--slate:#5A6B84;--line:#E5EAF3;--soft:#F5F8FD;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --shadow:0 20px 46px rgba(11,27,77,.12),0 2px 8px rgba(11,27,77,.06);
}
.wrap{width:min(1200px,92vw);margin-inline:auto}
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.75rem 1.3rem;border-radius:9px;font:600 .95rem var(--sans);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-dark)}
.btn-outline{background:#fff;color:var(--blue);border-color:var(--blue)}

/* ---------- header ---------- */
nav.topnav{position:sticky;top:0;z-index:70;background:#fff;border-bottom:1px solid var(--line);font-family:var(--sans)}
nav.topnav > .wrap{display:flex;align-items:center;gap:1.2rem;height:76px;width:min(1360px,96vw)}
nav.topnav .mobile-menu .wrap{display:block;height:auto}
.brand{display:flex;align-items:center;flex:0 0 auto;text-decoration:none}
/* The logo file is white lettering on black. It is drawn through an SVG filter
   that turns the black transparent and the lettering navy (header) or keeps it
   white (footer), and cropped to the logo itself with the viewBox. */
.tv-logo{display:block;width:clamp(170px,16vw,240px);height:auto;aspect-ratio:1668/254}
.tv-logo-lg{width:280px}
nav.topnav ul{display:flex;gap:.9rem;list-style:none;margin:0 auto 0 .4rem;padding:0;flex-wrap:nowrap}
nav.topnav ul a{text-decoration:none;font-size:.8rem;font-weight:600;color:var(--slate);white-space:nowrap}
nav.topnav ul a:hover{color:var(--ink)}
.nav-right{display:flex;align-items:center;gap:1rem;flex:0 0 auto}
.nav-right .signin{font-size:.85rem;font-weight:600;text-decoration:none;color:var(--slate);white-space:nowrap}
.nav-right .signin:hover{color:var(--ink)}
.nav-right .btn{padding:.6rem 1.05rem;font-size:.85rem;white-space:nowrap}
.menu-btn{display:none;width:42px;height:42px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--navy);cursor:pointer;align-items:center;justify-content:center}
.menu-btn svg{width:20px;height:20px}
.mobile-menu{display:none;border-top:1px solid var(--line);background:#fff;padding:.6rem 0 1rem}
.mobile-menu a{display:block;padding:.75rem 0;color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1px solid var(--line)}
.mobile-menu.open{display:block}
@media(max-width:1400px){nav.topnav ul{gap:.7rem}nav.topnav ul a{font-size:.77rem}}
/* shared.js adds .compact when the row does not fit on the current screen */
nav.topnav.compact ul{display:none}
nav.topnav.compact .menu-btn{display:inline-flex}
nav.topnav.compact .nav-right{margin-left:auto}
@media(max-width:1100px){
  nav.topnav ul{display:none}
  .menu-btn{display:inline-flex}
  .nav-right{margin-left:auto}
}
@media(max-width:560px){.nav-right .signin{display:none}.nav-right .btn{padding:.55rem .8rem;font-size:.8rem}.tv-logo{width:140px}}

/* ---------- footer ---------- */
.site-footer{background:var(--navy);color:rgba(255,255,255,.72);padding:3.8rem 0 1.6rem;font-family:var(--sans);font-size:.92rem;line-height:1.55}
.sf-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.25fr;gap:2.6rem}
.sf-logo{display:inline-block}
.sf-tag{margin-top:1rem;color:rgba(255,255,255,.66);max-width:32ch}
.site-footer h4{color:#fff;font-size:.95rem;font-weight:700;margin:0 0 1rem}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:.6rem}
.site-footer a,.site-footer .linklike{color:rgba(255,255,255,.78);text-decoration:none;font:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
.site-footer a:hover,.site-footer .linklike:hover{color:#fff;text-decoration:underline}
.site-footer .sf-cta{display:inline-block;margin-top:.5rem;padding:.55rem 1rem;border-radius:9px;background:var(--blue);color:#fff;font-weight:600}
.site-footer .sf-cta:hover{text-decoration:none;background:var(--blue-dark);color:#fff}
.sf-bottom{margin-top:3rem;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.82rem;color:rgba(255,255,255,.55)}
.sf-bottom a{color:rgba(255,255,255,.6)}
@media(max-width:960px){.sf-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.sf-grid{grid-template-columns:1fr}}

/* ---------- partner logos (Qui sommes-nous) ---------- */
.about .card img,.about-logo{display:block;height:108px;width:auto;max-width:100%;object-fit:contain;object-position:center;margin:0 auto 1rem}
.about .card a{display:block;border-radius:10px}
.about .card a:hover img{opacity:.85}

/* ---------- reveal on scroll (classes added by shared.js) ---------- */
.reveal{opacity:0;transform:translateY(32px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in-view{opacity:1;transform:none}

/* ---------- dark mode switch (button added by shared.js) ---------- */
.theme-btn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--navy);cursor:pointer;flex:0 0 auto}
.theme-btn:hover{border-color:var(--sky)}
.theme-btn svg{width:19px;height:19px}
.theme-btn .i-sun{display:none}
html[data-theme="dark"] .theme-btn .i-sun{display:block}
html[data-theme="dark"] .theme-btn .i-moon{display:none}

/* ---------- dark theme ----------
   --navy is the heading colour, so it turns light here; the few places that
   use navy as a background (footer, case study blocks) are set back below. */
html[data-theme="dark"]{
  --navy:#E8EEFA;--ink:#DCE4F2;--slate:#9DAAC2;--line:#233050;--soft:#0D1629;
  --card:#111B32;--bg:#0A1122;--accent:#5B9BFF;
  --shadow:0 20px 46px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.3);
  color-scheme:dark;
}
html[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
html[data-theme="dark"] nav.topnav,
html[data-theme="dark"] .mobile-menu{background:var(--bg)}
html[data-theme="dark"] .menu-btn,
html[data-theme="dark"] .role,
html[data-theme="dark"] .flow,
html[data-theme="dark"] .feat,
html[data-theme="dark"] .innov,
html[data-theme="dark"] .proj,
html[data-theme="dark"] .about .card,
html[data-theme="dark"] .c-card,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .form input,
html[data-theme="dark"] .form select,
html[data-theme="dark"] .form textarea,
html[data-theme="dark"] .ck,
html[data-theme="dark"] .ck-btn.ghost,
html[data-theme="dark"] .toc,
html[data-theme="dark"] .btn-outline{background:var(--card)}
html[data-theme="dark"] .btn-outline{color:var(--accent);border-color:var(--accent)}
html[data-theme="dark"] .btn-outline:hover{background:#16244a}
html[data-theme="dark"] .stage{background:var(--card)!important}
html[data-theme="dark"] .brand img{filter:invert(1) hue-rotate(180deg)}
html[data-theme="dark"] .about-logo{background:#fff;padding:.5rem 1rem;border-radius:10px}
html[data-theme="dark"] .site-footer{background:#060B18}
html[data-theme="dark"] .story{background-color:#0B1B4D}
html[data-theme="dark"] .story .go{color:#0B1B4D}
html[data-theme="dark"] .callout{background:#0F1E3F;border-color:#1E3566}
html[data-theme="dark"] .callout p,
html[data-theme="dark"] .legal-body p,
html[data-theme="dark"] .legal-body li{color:var(--ink)}
html[data-theme="dark"] .kicker,
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .hero h1 .accent,
html[data-theme="dark"] .mode b em,
html[data-theme="dark"] .mode-ic,
html[data-theme="dark"] .legal-body a,
html[data-theme="dark"] .fine-links a,
html[data-theme="dark"] .ck a{color:var(--accent)}
html[data-theme="dark"] .mode:hover .mode-ic{background:rgba(91,155,255,.12)}

/* ---------- back to top (button added by shared.js) ---------- */
.to-top{position:fixed;right:1.4rem;bottom:1.4rem;z-index:250;width:50px;height:50px;border-radius:50%;border:0;background:var(--blue);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 24px rgba(11,92,255,.35);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .25s,transform .25s,visibility .25s,background .15s}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--blue-dark);transform:translateY(-2px)}
.to-top svg{width:22px;height:22px}
@media(max-width:560px){.to-top{right:1rem;bottom:1rem;width:46px;height:46px}}
@media(prefers-reduced-motion:reduce){.to-top{transition:none}}

/* ---------- cookie banner ---------- */
.ck{position:fixed;left:1rem;bottom:1rem;z-index:300;width:min(560px,calc(100vw - 2rem));background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 60px rgba(11,27,77,.24);padding:1.3rem 1.4rem;font-family:var(--sans);font-size:.9rem;line-height:1.55;display:none}
.ck.show{display:block}
.ck h4{margin:0 0 .45rem;font-size:1.02rem;color:var(--navy)}
.ck p{margin:0;color:var(--slate)}
.ck a{color:var(--blue)}
.ck-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
.ck-btn{flex:1 1 auto;border-radius:9px;padding:.62rem 1rem;font:600 .88rem var(--sans);cursor:pointer;border:1.5px solid var(--blue);background:var(--blue);color:#fff}
.ck-btn.ghost{background:#fff;color:var(--blue)}
.ck-btn:hover{filter:brightness(.94)}
.ck-prefs{display:none;margin-top:1rem;border-top:1px solid var(--line);padding-top:.6rem}
.ck-prefs.show{display:block}
.ck-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--line)}
.ck-row:last-child{border-bottom:0}
.ck-row b{display:block;color:var(--navy);font-size:.9rem}
.ck-row span{color:var(--slate);font-size:.82rem}
.ck-switch{flex:0 0 auto;width:44px;height:25px;border-radius:13px;background:#C7D2E8;position:relative;border:0;cursor:pointer;margin-top:.15rem}
.ck-switch::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;transition:left .15s}
.ck-switch[aria-checked="true"]{background:var(--blue)}
.ck-switch[aria-checked="true"]::after{left:22px}
.ck-switch:disabled{opacity:.55;cursor:not-allowed}

/* ---------- inner pages ---------- */
.page-hero{background:linear-gradient(135deg,#0B1B4D 0%,#123a9c 100%);color:#fff;padding:3.8rem 0 3.2rem;font-family:var(--sans)}
.page-hero small{font-weight:700;letter-spacing:.1em;font-size:.78rem;color:#9CC0FF}
.page-hero h1{color:#fff;font-size:clamp(2rem,3.6vw,2.8rem);margin:.5rem 0 .6rem;line-height:1.12}
.page-hero p{color:rgba(255,255,255,.82);max-width:62ch;margin:0}
.legal{width:min(1200px,92vw);margin:3rem auto 5rem;display:grid;grid-template-columns:250px 1fr;gap:3.2rem;align-items:start;font-family:var(--sans)}
.toc{position:sticky;top:100px;border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.2rem;background:#fff}
.toc b{display:block;font-size:.76rem;letter-spacing:.08em;color:var(--slate);margin-bottom:.6rem}
.toc a{display:block;color:var(--ink);text-decoration:none;font-size:.86rem;padding:.3rem 0}
.toc a:hover{color:var(--blue)}
.legal-body{max-width:760px}
.legal-body .updated{color:var(--slate);font-size:.88rem;margin:0 0 1.6rem}
.legal-body h2{font-size:1.25rem;color:var(--navy);margin:2.4rem 0 .8rem;scroll-margin-top:100px}
.legal-body h2:first-of-type{margin-top:0}
.legal-body p,.legal-body li{color:#26324A;line-height:1.7}
.legal-body p{margin:0 0 .9rem}
.legal-body ul{margin:0 0 .9rem;padding-left:1.3rem}
.legal-body li{margin-bottom:.3rem}
.legal-body a{color:var(--blue)}
.info-card{border:1px solid var(--line);border-radius:14px;background:var(--soft);padding:1.1rem 1.3rem;margin:0 0 1rem}
@media(max-width:900px){.legal{grid-template-columns:1fr;gap:1.6rem}.toc{position:static}}

/* contact page */
.contact{width:min(1200px,92vw);margin:3rem auto 5rem;display:grid;grid-template-columns:.85fr 1.15fr;gap:2.4rem;align-items:start;font-family:var(--sans)}
.c-card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:1.4rem 1.5rem;margin-bottom:1rem;display:flex;gap:1rem;align-items:flex-start}
.c-card .ic{width:48px;height:48px;border-radius:12px;background:var(--blue);color:#fff;display:grid;place-items:center;flex:0 0 auto;box-shadow:0 8px 18px rgba(11,92,255,.28)}
.c-card .ic svg{width:22px;height:22px}
.c-card b{display:block;color:var(--navy);font-size:.98rem;margin-bottom:.2rem}
.c-card span,.c-card a{color:var(--slate);font-size:.92rem;line-height:1.55;text-decoration:none}
.c-card a:hover{color:var(--blue)}
@media(max-width:900px){.contact{grid-template-columns:1fr}}

/* request form (home page and contact page) */
.form-card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:2.2rem;font-family:var(--sans)}
.form-card h3{font-size:1.3rem;color:var(--navy);margin:0 0 .4rem}
.form-card .prompt{color:var(--slate);font-size:.92rem;margin:0 0 1.5rem}
.form{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.3rem}
.field{display:flex;flex-direction:column;gap:.4rem}
.field.full{grid-column:1/-1}
.form label{font-size:.85rem;font-weight:700;color:var(--navy)}
.form label sup{color:var(--blue)}
.form input,.form select,.form textarea{font:inherit;font-size:.96rem;padding:.75rem .85rem;border:1px solid var(--line);border-radius:9px;background:#fff;color:inherit}
.form textarea{resize:vertical;min-height:120px}
.form .btn{grid-column:1/-1;justify-self:start;margin-top:.3rem}
.fmsg{margin-top:1.1rem;padding:.85rem 1.05rem;border-radius:9px;font-size:.92rem;display:none}
.fmsg.ok{display:block;background:#E7F7EE;color:#0A6B3D;border:1px solid #BFE8D2}
.fmsg.err{display:block;background:#FDECEE;color:#A01B2E;border:1px solid #F5C6CD}
.fine-links{margin-top:1.2rem;display:flex;gap:1.3rem;flex-wrap:wrap;font-size:.83rem;color:var(--slate)}
.fine-links a{color:var(--blue);text-decoration:none}
@media(max-width:700px){.form{grid-template-columns:1fr}.form-card{padding:1.5rem}}