/* Polynumeric typefaces — SUBSTITUTIONS (no brand font files were provided).
   Wordmark in the supplied logo is a Helvetica-class neo-grotesque (Bold + Light mix).
   Archivo is the closest freely-available grotesque for display/wordmark-adjacent use;
   IBM Plex Sans carries UI/body text (technical, legible, reassuring);
   IBM Plex Mono is used for reference codes, specs and micro-labels. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root{
/* ---- Brand base ---------------------------------------------------- */
/* Sampled directly from the supplied logo files: pure blue + pure black. */
--pn-blue:#0000FF;
--pn-black:#000000;
--pn-white:#FFFFFF;

/* Blue ramp derived in oklch from the pure logo blue */
--blue-50:#EEF0FF;
--blue-100:#DDE1FF;
--blue-200:#BCC2FF;
--blue-300:#8C95FF;
--blue-400:#5257FF;
--blue-500:#0000FF;
--blue-600:#0000D6;
--blue-700:#0000AB;
--blue-800:#000883;
--blue-900:#0A1058;

/* Cool ink / steel neutrals */
--ink-1000:#05070D;
--ink-900:#0A0D16;
--ink-800:#121724;
--ink-700:#1D2434;
--ink-600:#2C3547;
--steel-500:#4B5568;
--steel-400:#6B768C;
--steel-300:#95A0B5;
--steel-200:#C3CAD8;
--steel-150:#DEE3EC;
--steel-100:#EAEEF5;
--steel-50:#F4F6FA;

/* Semantic hues */
--green-500:#0B9B63;
--green-100:#DCF5EA;
--amber-500:#D98A0B;
--amber-100:#FCF0DA;
--red-500:#D62119;
--red-100:#FCE4E2;

/* ---- Semantic aliases --------------------------------------------- */
--text-strong:var(--ink-900);
--text-body:var(--ink-700);
--text-muted:var(--steel-400);
--text-faint:var(--steel-300);
--text-inverse:var(--pn-white);
--text-inverse-muted:#A7B0C4;
--text-accent:var(--blue-600);
--text-link:var(--blue-600);
--text-link-hover:var(--blue-700);

--surface-page:var(--pn-white);
--surface-mist:var(--steel-50);
--surface-card:var(--pn-white);
--surface-card-alt:var(--steel-50);
--surface-ink:var(--ink-900);
--surface-ink-raised:var(--ink-800);
--surface-accent:var(--blue-500);
--surface-accent-soft:var(--blue-50);

--border-hairline:var(--steel-150);
--border-default:var(--steel-200);
--border-strong:var(--steel-300);
--border-ink:rgba(255,255,255,.14);
--border-accent:var(--blue-500);

--action-primary:var(--blue-500);
--action-primary-hover:var(--blue-600);
--action-primary-active:var(--blue-700);
--action-ink:var(--ink-900);
--action-ink-hover:var(--ink-700);
--focus-ring:var(--blue-400);

--status-ok:var(--green-500);
--status-ok-soft:var(--green-100);
--status-warn:var(--amber-500);
--status-warn-soft:var(--amber-100);
--status-alert:var(--red-500);
--status-alert-soft:var(--red-100);
--status-info:var(--blue-500);
--status-info-soft:var(--blue-50);
}

:root{
--font-display:"Archivo","Helvetica Neue",Helvetica,sans-serif;
--font-sans:"IBM Plex Sans","Helvetica Neue",Helvetica,sans-serif;
--font-mono:"IBM Plex Mono",ui-monospace,monospace;

/* Display — Archivo, tight tracking, used for hero + section titles */
--fs-display-1:clamp(2.75rem,5.2vw,4.75rem); /* @kind font */
--fs-display-2:clamp(2.25rem,4vw,3.5rem); /* @kind font */
--fs-display-3:clamp(1.75rem,2.6vw,2.5rem); /* @kind font */
--lh-display:1.02; /* @kind font */
--ls-display:-0.028em; /* @kind font */

/* Headings */
--fs-h1:2rem; /* @kind font */
--fs-h2:1.5rem; /* @kind font */
--fs-h3:1.25rem; /* @kind font */
--fs-h4:1.0625rem; /* @kind font */
--lh-heading:1.18; /* @kind font */
--ls-heading:-0.014em; /* @kind font */

/* Body */
--fs-lead:1.1875rem; /* @kind font */
--fs-body:1rem; /* @kind font */
--fs-body-sm:0.9375rem; /* @kind font */
--fs-caption:0.8125rem; /* @kind font */
--lh-body:1.62; /* @kind font */
--lh-tight:1.45; /* @kind font */

/* Eyebrow / micro-label — uppercase, wide tracking, mono or sans 600 */
--fs-eyebrow:0.75rem; /* @kind font */
--ls-eyebrow:0.16em; /* @kind font */
--fs-micro:0.6875rem; /* @kind font */
--ls-micro:0.1em; /* @kind font */

--fw-regular:400; /* @kind font */
--fw-medium:500; /* @kind font */
--fw-semibold:600; /* @kind font */
--fw-bold:700; /* @kind font */
--fw-black:800; /* @kind font */
}

:root{
--space-0:0;
--space-1:2px;
--space-2:4px;
--space-3:8px;
--space-4:12px;
--space-5:16px;
--space-6:20px;
--space-7:24px;
--space-8:32px;
--space-9:40px;
--space-10:48px;
--space-11:64px;
--space-12:80px;
--space-13:96px;
--space-14:128px;
/* vertical rhythm for marketing sections */
--section-y:clamp(64px,7vw,120px); /* @kind spacing */
--section-y-tight:clamp(40px,4vw,72px); /* @kind spacing */
}

:root{
--radius-0:0px;
--radius-1:2px;
--radius-2:4px;
--radius-3:6px;
--radius-4:10px;
--radius-5:14px;
--radius-6:20px;
--radius-pill:999px;
/* defaults by role */
--radius-control:6px;
--radius-card:10px;
--radius-panel:14px;
--border-w:1px; /* @kind other */
--border-w-strong:2px; /* @kind other */
}

:root{
/* Cool, blue-tinted shadows — never neutral grey/black */
--shadow-0:none;
--shadow-1:0 1px 2px rgba(10,13,22,.06),0 1px 1px rgba(10,13,22,.04);
--shadow-2:0 2px 4px rgba(10,13,22,.06),0 6px 16px rgba(10,13,22,.06);
--shadow-3:0 8px 24px rgba(10,16,40,.10),0 2px 6px rgba(10,16,40,.06);
--shadow-4:0 24px 60px rgba(10,16,40,.16),0 6px 16px rgba(10,16,40,.08);
--shadow-accent:0 10px 30px rgba(0,0,255,.22);
--inset-hairline:inset 0 0 0 1px var(--border-hairline);
--inset-accent:inset 0 0 0 1px var(--blue-200);
--ring-focus:0 0 0 3px rgba(82,87,255,.35);
/* protection gradient for text over imagery */
--scrim-bottom:linear-gradient(to top,rgba(5,7,13,.88) 0%,rgba(5,7,13,.55) 38%,rgba(5,7,13,0) 78%); /* @kind other */
--scrim-left:linear-gradient(to right,rgba(5,7,13,.9) 0%,rgba(5,7,13,.4) 55%,rgba(5,7,13,0) 100%); /* @kind other */
--glass:rgba(255,255,255,.06); /* @kind other */
--glass-blur:saturate(140%) blur(14px); /* @kind other */
}

:root{
--ease-out:cubic-bezier(.2,.8,.2,1); /* @kind other */
--ease-in-out:cubic-bezier(.4,0,.2,1); /* @kind other */
--dur-instant:90ms; /* @kind other */
--dur-fast:160ms; /* @kind other */
--dur-base:220ms; /* @kind other */
--dur-slow:340ms; /* @kind other */
--dur-reveal:520ms; /* @kind other */
--rise:8px; /* @kind other */
--transition-control:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out); /* @kind other */
}
@media (prefers-reduced-motion:reduce){:root{
--dur-fast:0ms; /* @kind other */
--dur-base:0ms; /* @kind other */
--dur-slow:0ms; /* @kind other */
--dur-reveal:0ms; /* @kind other */
--rise:0px; /* @kind other */
}}

:root{
--container-max:1240px;
--container-narrow:760px;
--container-wide:1440px;
--gutter:clamp(20px,4vw,48px); /* @kind spacing */
--header-h:132px;
--header-h-compact:64px;
--grid-cols:12; /* @kind other */
--grid-gap:clamp(16px,2vw,32px);
--hit-min:44px;
/* Hexagon keyline pattern — the logo motif, used at very low opacity only */
--hex-clip:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%); /* @kind other */
}


*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-strong);letter-spacing:var(--ls-heading);line-height:var(--lh-heading);font-weight:var(--fw-bold);margin:0}
p,ul,ol,dl{margin:0}
img{max-width:100%;display:block;height:auto}
a{color:var(--text-link);text-decoration:none;transition:color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--text-link-hover);text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:99;background:#fff;padding:10px 14px;border-radius:6px}
.container{max-width:var(--container-max);margin:0 auto;padding-inline:var(--gutter)}
.narrow{max-width:var(--container-narrow)}
.eyebrow{font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-accent);font-weight:var(--fw-medium);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:18px;height:1px;background:currentColor;opacity:.6}
.micro{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:var(--ls-micro);text-transform:uppercase}
.section{padding-block:var(--section-y)}
.section-tight{padding-block:var(--section-y-tight)}
.ink{background:var(--surface-ink);color:var(--text-inverse-muted)}
.ink h1,.ink h2,.ink h3{color:var(--text-inverse)}
.mist{background:var(--surface-mist)}
.hex{clip-path:var(--hex-clip)}
.stack{display:flex;flex-direction:column}
.gap-s{gap:10px}.gap-m{gap:20px}.gap-l{gap:32px}.gap-xl{gap:44px}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.grid{display:grid;gap:var(--grid-gap)}
.cols-4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.cols-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.split{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
.aside-layout{grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start}
/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:var(--radius-control);font-weight:var(--fw-semibold);font-size:var(--fs-body-sm);line-height:1;border:1px solid transparent;cursor:pointer;transition:var(--transition-control);text-decoration:none}
.btn:hover{text-decoration:none}
.btn-lg{min-height:54px;padding:0 28px;font-size:var(--fs-body)}
.btn-primary{background:var(--action-primary);color:#fff;box-shadow:var(--shadow-1)}
.btn-primary:hover{background:var(--action-primary-hover);color:#fff;box-shadow:var(--shadow-accent)}
.btn-outline{background:transparent;color:var(--text-strong);border-color:var(--border-default)}
.btn-outline:hover{background:var(--surface-accent-soft);border-color:var(--blue-300);color:var(--blue-700)}
.btn-onink{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.24)}
.btn-onink:hover{background:rgba(255,255,255,.16);color:#fff}
.btn-block{display:flex;width:100%}
/* Cartes */
.card{background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--radius-card);box-shadow:var(--shadow-1);padding:24px}
.card-mist{background:var(--surface-mist)}
a.card{display:block;color:inherit}
a.card:hover{text-decoration:none;border-color:var(--blue-200);box-shadow:var(--shadow-3);transform:translateY(-2px)}
.icon-tile{width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;clip-path:var(--hex-clip);background:var(--surface-accent-soft);color:var(--blue-600)}
.icon-tile svg{width:22px;height:22px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--radius-pill);font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;background:var(--surface-accent-soft);color:var(--blue-700);border:1px solid var(--blue-200);width:fit-content}
.badge-onink{background:rgba(255,255,255,.08);color:#E7EBF3;border-color:rgba(255,255,255,.18)}
.checklist{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px;font-size:var(--fs-caption)}
.checklist li::before{content:"✓";color:var(--blue-500);font-weight:700;margin-right:8px}
/* En-tête */
.site-header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--border-hairline)}
.site-header .bar{height:var(--header-h);display:flex;align-items:center;gap:24px}
.site-header .logo img{max-height:102px;width:auto;max-width:100%;object-fit:contain}
.nav{display:flex;gap:4px;flex-shrink:0}
.nav a{padding:8px 14px;border-radius:var(--radius-2);font-size:var(--fs-body-sm);font-weight:500;color:var(--text-body)}
.nav a:hover{background:var(--surface-mist);text-decoration:none}
.nav a[aria-current]{background:var(--surface-accent-soft);color:var(--text-accent);font-weight:600}
.header-right{margin-left:auto;display:flex;align-items:center;gap:14px;flex-shrink:0}
.header-tel{font-family:var(--font-display);font-size:25px;font-weight:600;color:var(--text-strong);white-space:nowrap;display:flex;align-items:center;gap:8px}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:transparent;border:0;cursor:pointer}
.mobile-nav{display:none;border-top:1px solid var(--border-hairline);background:#fff;padding:8px var(--gutter) 16px}
.mobile-nav[data-open]{display:flex;flex-direction:column}
.mobile-nav a{min-height:52px;display:flex;align-items:center;border-bottom:1px solid var(--border-hairline);color:var(--text-strong);font-weight:500}
/* Pied de page */
.site-footer{background:var(--surface-ink);padding:64px 0 28px;color:var(--text-inverse-muted)}
.footer-cols{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px}
.footer-cols a{color:var(--text-inverse-muted);font-size:var(--fs-body-sm)}
.footer-col{display:flex;flex-direction:column;gap:12px;align-items:center;padding-block:60px}
.footer-col .micro{color:var(--blue-300);font-size:16px}
.legal-row{margin-top:48px;padding-top:20px;border-top:1px solid var(--border-ink);display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.legal-row .micro{color:rgba(255,255,255,.45)}
.legal-row a{font-size:var(--fs-caption)}
/* Onglets & FAQ */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border-hairline);flex-wrap:wrap}
.tabs button{padding:12px 16px;border:0;background:transparent;cursor:pointer;font-size:var(--fs-body-sm);font-weight:500;color:var(--text-muted);border-bottom:2px solid transparent;font-family:inherit}
.tabs button[aria-selected="true"]{color:var(--text-strong);font-weight:600;border-bottom-color:var(--surface-accent)}
.panel[hidden]{display:none}
details.faq{border-bottom:1px solid var(--border-hairline)}
details.faq summary{cursor:pointer;list-style:none;padding:20px 4px;font-family:var(--font-display);font-size:var(--fs-h4);font-weight:600;color:var(--text-strong)}
details.faq[open] summary{color:var(--text-accent)}
details.faq p{padding:0 48px 22px 4px;font-size:var(--fs-body-sm)}
/* Formulaire */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:var(--fs-caption);font-weight:600;color:var(--text-strong)}
.field input,.field select,.field textarea{font:inherit;font-size:var(--fs-body-sm);color:var(--text-strong);padding:12px 14px;background:#fff;border:1px solid var(--border-default);border-radius:var(--radius-control)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue-400);box-shadow:var(--ring-focus)}
.req{color:var(--status-alert)}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-body-sm)}
.alert{display:flex;gap:12px;padding:14px 16px;border-radius:var(--radius-card);background:var(--status-info-soft);border:1px solid var(--blue-200);font-size:var(--fs-body-sm)}
.alert-ok{background:var(--status-ok-soft);border-color:#B9E7D2}
/* Bandeau CTA */
.cta-band{position:relative;overflow:hidden;background:#000;border-radius:var(--radius-panel);padding:clamp(32px,4vw,56px);color:var(--text-inverse-muted)}
.cta-band::after{content:"";position:absolute;right:-60px;top:-80px;width:340px;height:340px;clip-path:var(--hex-clip);background:var(--blue-500);opacity:.18}
.cta-band>*{position:relative;z-index:1}
.cta-band h1,.cta-band h2,.cta-band h3{color:var(--text-inverse)}
.cta-band p a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.brands{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px 12px;align-items:center}
.brands span{height:48px;display:flex;align-items:center;justify-content:center;padding:0 6px}
.brands img{filter:grayscale(1);opacity:.7;transition:filter var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out);width:auto}
.brands img:hover{filter:none;opacity:1}
.media{border-radius:var(--radius-panel);overflow:hidden;box-shadow:var(--shadow-4)}
.stat{display:flex;flex-direction:column;gap:6px}
.stat b{font-family:var(--font-display);font-size:clamp(2rem,3vw,2.75rem);font-weight:700;letter-spacing:var(--ls-display);line-height:1;color:var(--text-inverse)}
.stat .micro{color:var(--blue-300)}
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--grid-gap)}
.steps li{border-top:2px solid var(--border-ink);padding-top:20px;display:flex;flex-direction:column;gap:8px}
.steps .num{width:34px;height:34px;border-radius:50%;border:1px solid var(--blue-700);color:var(--blue-300);display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:var(--fs-caption)}
@media (max-width:1240px){.header-tel{display:none}}
@media (max-width:1100px){.nav{display:none}.burger{display:inline-flex}}
@media (max-width:1024px){.split{grid-template-columns:1fr}}
@media (max-width:980px){.aside-layout{grid-template-columns:1fr}.aside-layout aside{position:static!important}}
@media (max-width:900px){.footer-cols{grid-template-columns:1fr 1fr}}
@media (max-width:820px){.site-header .logo img{max-height:64px;width:auto}}
@media (max-width:600px){.footer-cols{grid-template-columns:1fr}.legal-row{flex-direction:column;align-items:flex-start}}

/* Bandeau cookies */
.cc{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;background:var(--surface-ink);color:var(--text-inverse-muted);border:1px solid var(--border-ink);border-radius:var(--radius-panel);box-shadow:var(--shadow-4);animation:cc-in var(--dur-slow) var(--ease-out) both}
@keyframes cc-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.cc-in{max-width:var(--container-max);margin:0 auto;padding:16px 24px;display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cc-txt{flex:1;min-width:280px;max-width:640px;display:flex;flex-direction:column;gap:4px}
.cc-txt strong{color:var(--text-inverse);font-family:var(--font-display);font-size:var(--fs-h4)}
.cc-txt p{font-size:var(--fs-body-sm);line-height:1.55}
.cc-txt a{font-size:var(--fs-caption);color:var(--blue-300)}
.cc-btns{display:flex;gap:10px;flex-wrap:nowrap;flex-shrink:0}
.cc .btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.32)}
.cc .btn-outline:hover{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.5)}
@media (max-width:600px){.cc-in{padding:16px}.cc-btns .btn{flex:1}}
/* Retour formulaire */
.form-msg{scroll-margin-top:calc(var(--header-h) + 24px)}
.form-msg[hidden]{display:none}

/* Fil d'ariane sur fond ink */
.ink nav[aria-label="Fil d'ariane"]{color:rgba(255,255,255,.4)}
.ink nav[aria-label="Fil d'ariane"] a{color:var(--text-inverse-muted)}
.ink nav[aria-label="Fil d'ariane"] a:hover{color:#fff}
/* Liens génériques sur fond ink */
.ink p a,.ink address a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ink p a:hover,.ink address a:hover{color:var(--blue-300)}
.site-footer img{width:auto;object-fit:contain}