/* ============================================================
   Sanfytech v5 — design system (dark IA)
   Palette logo : navy #16213a · teal #1ea7a0 / #117a74 · orange #e8631f
   ============================================================ */
:root{
  --navy:#0f1830;          /* page background, deepest */
  --navy-1:#16213a;        /* primary navy */
  --navy-2:#1c2942;        /* raised surface */
  --navy-3:#22324f;        /* card border / hover */
  --teal:#1ea7a0;          /* bright accent */
  --teal-deep:#117a74;     /* buttons / contrast */
  --orange:#e8631f;        /* secondary accent / CTA pop */
  --ink:#eaf1f6;           /* main text on dark */
  --muted:#9fb0c3;         /* secondary text */
  --muted-2:#6f8197;       /* tertiary */
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.14);
  --radius:16px;
  --radius-sm:11px;
  --maxw:1180px;
  --shadow:0 24px 50px -24px rgba(0,0,0,.7);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:92px}
body{
  font-family:"Inter var",Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--navy);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;transition:color .2s ease}
img{max-width:100%;display:block}
::selection{background:var(--teal-deep);color:#fff}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.narrow{max-width:820px;margin:0 auto;padding:0 24px}

/* ---------- typography ---------- */
h1,h2,h3,h4{line-height:1.12;letter-spacing:-.02em;font-weight:800}
.h-xl{font-size:clamp(34px,5vw,58px);font-weight:800;letter-spacing:-.025em;line-height:1.05}
.h-lg{font-size:clamp(28px,3.6vw,42px)}
.h-md{font-size:clamp(22px,2.4vw,30px)}
.lead{font-size:19px;color:var(--muted)}
.eyebrow{display:inline-block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal);background:rgba(30,167,160,.10);border:1px solid rgba(30,167,160,.30);
  padding:8px 16px;border-radius:999px;margin-bottom:22px;font-weight:600}
.grad{background:linear-gradient(100deg,var(--teal),var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent}
.text-muted{color:var(--muted)}
.text-teal{color:var(--teal)}
.center{text-align:center}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;
  padding:13px 24px;border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;
  transition:transform .3s var(--ease),background .2s ease,border-color .2s ease,box-shadow .3s ease;white-space:nowrap}
.btn:hover{transform:translateY(-3px)}
.btn-primary{background:var(--teal-deep);color:#fff}
.btn-primary:hover{background:var(--teal)}
.btn-orange{background:var(--orange);color:#fff}
.btn-orange:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal)}
.btn-white{background:#fff;color:var(--navy-1)}
.btn .arw{transition:transform .25s ease}
.btn:hover .arw{transform:translateX(4px)}
.link-arrow{color:var(--teal);font-weight:600;display:inline-flex;align-items:center;gap:8px}
.link-arrow .arw{transition:transform .25s ease}
.link-arrow:hover .arw{transform:translateX(4px)}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(15,24,48,.82);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:18px}
.brand img{height:30px;width:auto}
.nav{display:flex;align-items:center;gap:4px}
.nav a{padding:9px 14px;border-radius:9px;font-size:15px;color:var(--ink);font-weight:500;opacity:.92}
.nav a:hover{color:var(--teal);opacity:1}
.nav a.active{color:var(--teal)}
.header-cta{display:flex;align-items:center;gap:10px}
.nav-toggle{display:none;background:none;border:1px solid var(--line-2);border-radius:9px;
  width:42px;height:42px;color:var(--ink);font-size:20px;cursor:pointer;align-items:center;justify-content:center}
@media(max-width:980px){
  .nav{position:fixed;inset:72px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--navy-1);border-bottom:1px solid var(--line);padding:10px 16px 18px;
    transform:translateY(-12px);opacity:0;pointer-events:none;transition:.25s ease}
  .nav.open{transform:none;opacity:1;pointer-events:auto}
  .nav a{padding:13px 8px;border-bottom:1px solid var(--line)}
  .nav-toggle{display:inline-flex}
  .header-cta .btn:not(.nav-toggle){display:none}
}

/* ---------- sections ---------- */
.section{padding:84px 0}
.section.tight{padding:56px 0}
.section.alt{background:linear-gradient(180deg,var(--navy-1),var(--navy))}
.section-head{max-width:720px;margin:0 auto 50px;text-align:center}
.section-head.left{margin-left:0;text-align:left}
.section-head p{margin-top:16px;color:var(--muted);font-size:18px}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:110px 0 86px;
  background:radial-gradient(1100px 520px at 78% -10%,rgba(30,167,160,.20),transparent 60%),
             radial-gradient(820px 420px at 6% 0%,rgba(232,99,31,.10),transparent 55%)}
.hero.with-img{padding:0}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero-media img{border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow)}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:34px}.hero{padding:80px 0 60px}}
.hero p.lead{margin-top:22px;max-width:60ch}
.hero-actions{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px}
.hero-meta{margin-top:30px;display:flex;flex-wrap:wrap;gap:10px}
.hero-meta span{font-size:13px;color:#cdd9e6;background:rgba(255,255,255,.05);
  border:1px solid var(--line);padding:8px 14px;border-radius:10px}

/* page banner (interior pages) */
.page-banner{position:relative;padding:96px 0 56px;border-bottom:1px solid var(--line);
  background:radial-gradient(900px 360px at 80% -30%,rgba(30,167,160,.18),transparent 60%),var(--navy-1)}
.breadcrumb{font-size:13px;color:var(--muted-2);margin-top:14px}
.breadcrumb a:hover{color:var(--teal)}
.breadcrumb span{margin:0 8px;opacity:.5}

/* ---------- grids & cards ---------- */
.grid{display:grid;gap:24px}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.cols-3,.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}

.card{background:linear-gradient(180deg,var(--navy-2),var(--navy-1));border:1px solid var(--line);
  border-radius:var(--radius);padding:28px;transition:transform .3s var(--ease),border-color .25s ease,box-shadow .3s ease}
.card:hover{transform:translateY(-6px);border-color:rgba(30,167,160,.5);box-shadow:var(--shadow)}
.card .ico{width:50px;height:50px;border-radius:12px;display:grid;place-items:center;margin-bottom:18px;
  background:rgba(30,167,160,.12);border:1px solid rgba(30,167,160,.25);color:var(--teal)}
.card .ico svg{width:24px;height:24px}
.card h3{font-size:20px;margin-bottom:8px}
.card p{color:var(--muted);font-size:15px}
.card .link-arrow{margin-top:16px}

/* feature row */
.feature{display:flex;gap:16px;align-items:flex-start}
.feature .ico{flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:rgba(30,167,160,.12);border:1px solid rgba(30,167,160,.25);color:var(--teal)}
.feature .ico svg{width:22px;height:22px}
.feature h3{font-size:18px;margin-bottom:6px}
.feature p{color:var(--muted);font-size:15px}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border:1px solid var(--line);
  border-radius:var(--radius);padding:30px;background:rgba(255,255,255,.02)}
@media(max-width:720px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat .n{font-size:34px;font-weight:800;color:#fff}
.stat .n span{color:var(--teal)}
.stat .l{color:var(--muted);font-size:14px;margin-top:4px}

/* media+text split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split.rev .media{order:2}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:30px}.split.rev .media{order:0}}
.split .media img{border-radius:var(--radius);border:1px solid var(--line)}
.check-list{list-style:none;margin-top:22px;display:grid;gap:12px}
.check-list li{display:flex;gap:12px;align-items:flex-start;color:var(--ink)}
.check-list li::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;margin-top:2px;
  background:rgba(30,167,160,.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231ea7a0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/14px no-repeat}

/* ---------- pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:860px){.price-grid{grid-template-columns:1fr}}
.price{background:linear-gradient(180deg,var(--navy-2),var(--navy-1));border:1px solid var(--line);
  border-radius:var(--radius);padding:32px;position:relative}
.price.feat{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal),0 24px 50px -28px rgba(30,167,160,.5)}
.price .tag{position:absolute;top:-12px;left:32px;background:var(--orange);color:#fff;font-size:12px;
  font-weight:700;padding:5px 12px;border-radius:999px;text-transform:uppercase;letter-spacing:.05em}
.price h3{font-size:20px}
.price .amt{font-size:36px;font-weight:800;color:#fff;margin:14px 0 4px}
.price .amt small{font-size:15px;color:var(--muted);font-weight:500}
.price ul{list-style:none;margin:20px 0;display:grid;gap:12px}
.price li{display:flex;gap:10px;color:var(--muted);font-size:15px}
.price li::before{content:"✓";color:var(--teal);font-weight:800}

/* ---------- faq (CSS-only) ---------- */
.faq{display:grid;gap:14px;max-width:820px;margin:0 auto}
.faq details{background:var(--navy-2);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:20px 24px;font-weight:600;font-size:17px;
  display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--teal);font-size:24px;font-weight:400;transition:transform .25s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 24px 22px;color:var(--muted);font-size:15px}

/* ---------- blog ---------- */
.post-card{background:var(--navy-1);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:transform .3s var(--ease),border-color .25s ease,box-shadow .3s ease;display:flex;flex-direction:column}
.post-card:hover{transform:translateY(-6px);border-color:rgba(30,167,160,.5);box-shadow:var(--shadow)}
.post-card .thumb{aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--line)}
.post-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.post-card:hover .thumb img{transform:scale(1.05)}
.post-card .pc-body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.tagline{font-size:12px;color:var(--teal);font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.post-card h3{font-size:19px}
.post-meta{font-size:13px;color:var(--muted-2);margin-top:auto}

/* ---------- article / prose ---------- */
.prose{font-size:17px;color:#d4deea;line-height:1.8}
.prose h2{font-size:28px;margin:38px 0 14px;color:#fff}
.prose h3{font-size:22px;margin:28px 0 10px;color:#fff}
.prose p{margin:0 0 18px}
.prose ul,.prose ol{margin:0 0 18px 22px;display:grid;gap:8px}
.prose a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.prose blockquote{border-left:3px solid var(--teal);padding:6px 0 6px 22px;margin:24px 0;color:#fff;font-size:20px;font-style:italic}
.prose img{border-radius:var(--radius);border:1px solid var(--line);margin:26px 0}
.prose code{background:var(--navy-2);border:1px solid var(--line);padding:2px 7px;border-radius:6px;font-size:.9em}
.prose em{font-style:italic;color:#eef4fa}
.prose strong{color:#fff;font-weight:700}

/* ---------- blog article extras (contenu porté) ---------- */
.article-hero{margin:0 0 30px}
.article-hero img{margin:0;width:100%}
.prose pre{background:var(--navy-1);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:18px 20px;overflow-x:auto;margin:24px 0;font-size:14px;line-height:1.6}
.prose pre code{background:none;border:0;padding:0;color:#cfe0ee;font-size:13.5px;white-space:pre;border-radius:0}
.prose figure{margin:30px 0}
.prose figure img{margin:0}
.prose figcaption{margin-top:10px;text-align:center;font-size:14px;color:var(--muted)}
.prose blockquote footer,.prose blockquote cite{display:block;margin-top:10px;font-size:14px;font-style:normal;color:var(--muted)}
.callout{margin:26px 0;border-left:4px solid var(--teal);border-radius:var(--radius-sm);
  background:var(--navy-2);border-top:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:18px 22px;color:var(--ink);font-size:16px;line-height:1.7}
.callout .callout-title{font-weight:700;margin:0 0 6px;color:#fff}
.callout p{margin:0}
.callout p + p{margin-top:10px}
.callout-info{border-left-color:#3b82f6}
.callout-tip{border-left-color:var(--teal)}
.callout-warning{border-left-color:var(--orange)}
.callout-success{border-left-color:#22c55e}

/* ---------- blog : filtres par thématique ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips .chip{display:inline-block;padding:8px 16px;border:1px solid var(--line-2);border-radius:999px;
  background:var(--navy-2);color:var(--muted);font-size:14px;font-weight:600;transition:all .2s ease}
.chips .chip:hover{color:#fff;border-color:var(--teal);background:var(--navy-3)}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(110deg,var(--navy-1),#13233f);border:1px solid var(--line);
  border-radius:calc(var(--radius) + 4px);padding:54px 48px;text-align:center;position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;inset:0;background:radial-gradient(600px 220px at 80% 0,rgba(30,167,160,.18),transparent 60%);pointer-events:none}
.cta-band h2{position:relative}
.cta-band .btns{margin-top:26px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative}

/* ---------- contact form ---------- */
.form{display:grid;gap:16px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:620px){.form .row{grid-template-columns:1fr}}
.form label{display:block;font-size:14px;color:var(--muted);margin-bottom:7px}
.form input,.form textarea,.form select{width:100%;background:var(--navy-2);border:1px solid var(--line-2);
  border-radius:var(--radius-sm);padding:13px 15px;color:var(--ink);font:inherit;font-size:15px;transition:border-color .2s ease}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--teal)}
.form textarea{min-height:140px;resize:vertical}

/* ---------- footer ---------- */
.site-footer{background:#0c1426;border-top:1px solid var(--line);padding:64px 0 0}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:34px}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}
.site-footer img.flogo{height:30px;margin-bottom:16px}
.site-footer p{color:var(--muted);font-size:15px}
.fcol h4{font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-2);margin-bottom:16px}
.fcol a{display:block;color:var(--muted);font-size:15px;padding:6px 0}
.fcol a:hover{color:var(--teal)}
.foot-bottom{border-top:1px solid var(--line);margin-top:48px;padding:22px 0;
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;color:var(--muted-2);font-size:13px}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--orange);margin:0 8px;vertical-align:middle}
/* Liens légaux du bas de footer : discrets mais toujours atteignables. */
.foot-legal{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot-legal a{color:var(--muted-2);text-decoration:none}
.foot-legal a:hover{color:var(--teal);text-decoration:underline;text-underline-offset:3px}

/* ---------- reveal on scroll (only when JS is on, so no-JS shows everything) ---------- */
html.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .7s var(--ease)}
html.js .reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
body{animation:pageIn .5s ease both}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  body{animation:none}
  *{transition:none !important}
}
.mt-0{margin-top:0}.mt-4{margin-top:28px}.mb-0{margin-bottom:0}

/* ---- Tableaux & séparateurs des pages légales -------------------------------
   .prose ne stylait que le texte courant du blog ; les pages légales (mentions
   légales, confidentialité, CGU, CGPS) s'appuient sur des tableaux. Le tableau
   scrolle dans son propre conteneur pour que le body ne parte jamais en scroll
   horizontal sur mobile. */
.prose table{display:block;width:max-content;max-width:100%;overflow-x:auto;
  border-collapse:collapse;margin:24px 0;font-size:15px;line-height:1.6}
.prose thead{background:rgba(255,255,255,.05)}
.prose th,.prose td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.prose th{color:#fff;font-weight:700}
.prose tbody th[scope=row]{background:rgba(255,255,255,.03);white-space:nowrap}
.prose hr{border:0;border-top:1px solid var(--line);margin:34px 0}