/* Styles minimalistes et propres */
:root{
  --bg:#0a0c10;
  --surface:#0f141a;
  --surface-2:#121923;
  --text:#e8eef4;
  --muted:#9aa4ad;
  --primary:#64d38a;
  --accent:#6ae3ff;
  --danger:#ff6b6b;
  --border:#1e2733;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:14px;
  --radius-sm:10px;
  --space: clamp(16px, 2vw, 24px);
  --glass-bg: rgba(14,18,24,.6);
  --glass-surface: rgba(16,22,30,.7);
}
/* Thèmes */
:root[data-theme="light"]{
  --bg:#f4f7fc;
  --surface:#ffffff;
  --surface-2:#f1f5fb;
  --text:#0a0c10;
  --muted:#3c4652;
  --primary:#2f6dfa;
  --border:#dfe6ef;
  --shadow:0 8px 26px rgba(0,0,0,.08);
  --glass-bg: rgba(255,255,255,.55);
  --glass-surface: rgba(255,255,255,.68);
}
/* Palettes alternatives supprimées: on conserve la palette par défaut uniquement */
@font-face{
  font-family:'Inter var';
  src:url('../fonts/Inter-Variable.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, Helvetica, Arial, sans-serif;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 var(--space)}

/* Header & Navigation */
.site-header{position:sticky;top:0;background:var(--glass-bg);backdrop-filter:saturate(1.2) blur(12px);border-bottom:1px solid var(--border);z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:72px}
/* MAJ 2024-07 : Affichage du logo via logo.svg tout en conservant le texte pour les lecteurs d'écran */
.logo{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:48px;
  font-weight:800;
  letter-spacing:.2px;
  color:transparent;
}
.logo::before{
  content:"";
  display:block;
  inline-size:clamp(140px, 18vw, 180px);
  block-size:48px;
  background-color:var(--text);
  mask:url('/public/images/logo.svg') no-repeat center / contain;
  -webkit-mask:url('/public/images/logo.svg') no-repeat center / contain;
}
.logo:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:4px;
}
nav#site-nav{display:flex;align-items:center;gap:16px}
nav#site-nav a{color:var(--muted);padding:10px 8px;border-radius:10px}
nav#site-nav a:hover{color:var(--text);background:rgba(255,255,255,.03)}
.nav-toggle{display:none;appearance:none;background:var(--surface);border:1px solid var(--border);color:var(--text);padding:8px 12px;border-radius:10px}
.nav-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:900px){
  .nav-toggle{display:inline-flex;align-items:center;gap:8px}
  nav#site-nav{position:fixed;inset:64px 16px auto 16px;top:76px;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px;box-shadow:var(--shadow);display:none}
  nav#site-nav.open{display:flex}
}

/* Buttons */
.btn{display:inline-block;padding:12px 18px;border-radius:var(--radius-sm);border:1px solid var(--border);transition:transform .06s ease, background .2s ease, box-shadow .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--primary);color:#fff;border-color:transparent;font-weight:700}
.btn-primary:hover{box-shadow:0 8px 24px color-mix(in srgb, var(--primary) 35%, transparent)}
.btn-secondary{background:var(--accent);color:#03161b;border-color:transparent;font-weight:700}
.btn-ghost{background:transparent}
.btn:disabled{opacity:.6;cursor:not-allowed}
@media (prefers-reduced-motion: no-preference){
  .btn-primary{position:relative}
  .btn-primary::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .2s ease;box-shadow:0 0 0 0 color-mix(in srgb, var(--primary) 40%, transparent)}
  .btn-primary:hover::after{opacity:1}
}

/* Hero */
.hero{padding:56px 0;border-bottom:1px solid var(--border);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-20%;background:radial-gradient(700px 300px at 10% -10%, rgba(106,227,255,.15), transparent), radial-gradient(600px 260px at 90% 10%, rgba(100,211,138,.12), transparent)}
.hero-illu{display:block;max-width:100%;height:auto;margin:0 0 16px;filter:drop-shadow(0 10px 30px rgba(0,0,0,.35))}
.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:28px}
@media(max-width:900px){.grid-2{grid-template-columns:1fr}}
/* Hero improvements */
.hero-grid{align-items:center}
.hero-eyebrow{display:inline-block;margin:0 0 8px;padding:6px 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface-2);color:var(--muted);font-weight:700;letter-spacing:.2px;font-size:.9rem}
.hero-sub{font-size:clamp(16px, 2.2vw, 18px)}
.hero-badges{margin-top:12px}
.hero-media{position:relative}
.hero-media .lottie, .hero-media .hero-visual{display:block;inline-size:100%;block-size:340px;border-radius:16px;border:1px solid var(--border);background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));box-shadow:var(--shadow);overflow:hidden}
@media(max-width:900px){.hero-media .lottie, .hero-media .hero-visual{block-size:260px}}
.hero-media .hero-visual picture, .hero-media .hero-visual img{max-width:100%;width:100%;height:100%;object-fit:cover}
.hero-media .hero-fallback{display:none}
.hero-media .hero-card{position:absolute;right:8px;bottom:8px;max-width:min(80%, 360px)}

/* Typography */
h1{font-size: clamp(34px, 5vw, 52px);line-height:1.08;margin:0 0 12px}
h2{font-size: clamp(22px, 3vw, 32px);margin:32px 0 12px}
h3{margin:0 0 8px}
p{color:var(--muted);line-height:1.7}
.accent{color:var(--accent)}
.prose p{margin:.5em 0 1em}
.prose ul, .prose ol{color:var(--muted)}
.prose li{margin:.2em 0}

/* Cards & lists */
.hero-card{background:var(--surface);border:1px solid var(--border);padding:22px;border-radius:var(--radius);box-shadow:var(--shadow)}
.hero-card{background:var(--glass-surface);backdrop-filter:saturate(1.2) blur(10px)}
.ticks{list-style:none;padding:0;margin:16px 0 0;display:flex;gap:12px;flex-wrap:wrap}
.ticks li{background:var(--surface-2);border:1px solid var(--border);padding:8px 12px;border-radius:999px;color:var(--muted)}
.features{padding:36px 0}
main > section.container{padding:28px 0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.cards{grid-template-columns:1fr}}
.cards.single{grid-template-columns:1fr}
.cards.two{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.cards.two{grid-template-columns:1fr}}
.card{background:var(--glass-surface);backdrop-filter:saturate(1.2) blur(8px);border:1px solid var(--border);padding:18px;border-radius:var(--radius);box-shadow:var(--shadow);transition:transform .12s ease, box-shadow .12s ease}
.card:hover{transform:translateY(-2px)}
.card .thumb{display:block;margin:-6px -6px 10px;border-radius:10px;overflow:hidden;border:1px solid var(--border)}
.card .thumb img{display:block;width:100%;height:auto}
.icon{width:40px;height:40px;display:inline-grid;place-items:center;border-radius:12px;background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--primary) 22%, transparent));border:1px solid var(--border);margin-bottom:8px}
.icon svg{width:22px;height:22px;fill:currentColor;color:var(--text)}

/* MAJ 2024-06 : Fonds contrastés pour sections sélectionnées (mesh dégradés) */
.section-backdrop{position:relative;overflow:hidden;background:linear-gradient(140deg, color-mix(in srgb, var(--surface-2) 92%, transparent), color-mix(in srgb, var(--surface) 68%, transparent));border:1px solid var(--border);border-radius:clamp(18px, 2.5vw, 28px);padding:clamp(28px, 4vw, 44px);box-shadow:var(--shadow)}
.section-backdrop::before,
.section-backdrop::after{content:"";position:absolute;pointer-events:none}
.section-backdrop::before{inset:-40%;background:radial-gradient(520px 320px at 18% 22%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 65%), radial-gradient(460px 280px at 82% 78%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 70%);opacity:.55}
.section-backdrop::after{inset:-18%;background:
  repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 1px, transparent 1px 14px),
  radial-gradient(220px 180px at 22% 18%, rgba(255,255,255,.05), transparent 70%),
  linear-gradient(120deg, rgba(255,255,255,.07), transparent 62%);
mix-blend-mode:screen;opacity:.32}
.section-backdrop--accent::before{background:radial-gradient(520px 320px at 14% 18%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 70%), radial-gradient(520px 280px at 86% 82%, color-mix(in srgb, var(--primary) 24%, transparent), transparent 74%);opacity:.6}
.section-backdrop--primary::before{background:radial-gradient(540px 320px at 20% 18%, color-mix(in srgb, var(--primary) 30%, transparent), transparent 68%), radial-gradient(520px 240px at 88% 76%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 74%);opacity:.58}
.section-backdrop--muted::before{background:radial-gradient(520px 280px at 12% 24%, color-mix(in srgb, var(--surface-2) 85%, transparent), transparent 78%), radial-gradient(520px 280px at 88% 76%, color-mix(in srgb, var(--surface) 80%, transparent), transparent 75%);opacity:.42}
.section-backdrop > *{position:relative}
.section-backdrop > *:first-child{margin-top:0}

/* Slider */
.slider{position:relative;margin:12px auto 20px;border:1px solid var(--border);border-radius:var(--radius);background:var(--glass-surface);backdrop-filter:saturate(1.2) blur(8px);box-shadow:var(--shadow);overflow:hidden;max-width:900px;width:100%}
.slides{display:flex;will-change:transform;transition:transform .45s ease}
.slide{min-width:100%;padding:12px}
.slide .slide-media{margin:10px 0 0;display:block}
.slide .slide-media img{display:block;width:100%;height:auto;max-height:220px;object-fit:cover;border-radius:12px;border:1px solid var(--border);box-shadow:var(--shadow)}
.slider-controls{position:absolute;inset:auto 8px 24px 8px;display:flex;justify-content:space-between;pointer-events:none}
.slider-controls .btn{pointer-events:auto;padding:8px 12px}
.slider-dots{display:flex;gap:8px;justify-content:center;align-items:center;padding:6px}
.slider-dots .dot{appearance:none;border:1px solid var(--border);background:var(--surface-2);color:var(--muted);border-radius:999px;padding:4px 8px;cursor:pointer}
.slider-dots .dot[aria-selected="true"]{background:var(--accent);color:#03161b;border-color:transparent}

/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:8px 0 16px}
@media(max-width:900px){.kpis{grid-template-columns:1fr 1fr}}
.kpi-card{background:var(--glass-surface);backdrop-filter:saturate(1.2) blur(8px);border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px;text-align:center}
.kpi{font-size:clamp(20px,4vw,28px);font-weight:800;letter-spacing:.3px}
.kpi-label{color:var(--muted)}

/* Notices */
.notice{padding:12px;border:1px dashed var(--border);border-radius:12px;background:var(--surface-2);margin:12px 0;color:var(--text)}
.notice.info{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--border);border-left:4px solid var(--accent);background:var(--glass-surface);backdrop-filter:saturate(1.2) blur(8px)}
.notice .ni{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:999px;background:color-mix(in srgb, var(--accent) 25%, transparent);color:#03161b;font-weight:800;border:1px solid var(--border)}

/* Profile/presentation card */
.profile-card{display:grid;grid-template-columns:clamp(200px, 26vw, 280px) 1fr;gap:36px;align-items:center}
@media(max-width:900px){.profile-card{grid-template-columns:1fr}}
.profile-figure{width:clamp(200px, 26vw, 280px);height:clamp(200px, 26vw, 280px);border-radius:18px;background:var(--surface-2);border:1px solid var(--border);overflow:hidden;box-shadow:var(--shadow);position:relative}
@media(max-width:900px){.profile-figure{width:100%;height:auto;max-width:320px;margin:0 auto}}
.profile-figure img{display:block;width:100%;height:100%;object-fit:cover}
.profile-content{min-width:0;margin-left:clamp(12px, 2vw, 28px)}
.profile-badge{position:absolute;bottom:8px;left:8px;background:var(--accent);color:#03161b;border:1px solid var(--border);border-radius:999px;padding:6px 10px;font-weight:800;letter-spacing:.2px;box-shadow:var(--shadow);font-size:.9rem}

/* Footer */
.site-footer{border-top:1px solid var(--border);margin-top:36px}
@media(max-width:600px){
  .slide .slide-media img{max-height:180px}
}
@media(max-width:900px){
  .slide .slide-media img{max-height:180px}
}
.footer-grid{display:flex;align-items:center;justify-content:space-between;padding:20px 0;gap:16px;flex-wrap:wrap}
.footer-grid nav a{margin-right:16px;color:var(--muted)}
.footer-grid nav a:hover{color:var(--text)}
/* Contrôles de pied de page supprimés (palette/thème) */

/* Tables */
.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table thead th{color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.88rem;border-bottom:1px solid var(--border)}
.table th,.table td{padding:12px 14px;text-align:left}
.table tbody tr{background:var(--surface);border:1px solid var(--border)}
.table tbody tr:first-child td{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}
.table tbody tr:last-child td{border-bottom-left-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm)}

/* Forms */
form label{display:block;margin:12px 0 6px}
input,select,textarea{width:100%;padding:12px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--text);transition:border-color .15s ease, box-shadow .15s ease}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(106,227,255,.15)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:900px){.form-row{grid-template-columns:1fr}}

/* Details/summary (FAQ) */
details{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 14px;margin:8px 0}
details > summary{cursor:pointer;list-style:none}
details > summary::-webkit-details-marker{display:none}
details[open]{box-shadow:var(--shadow)}

/* Accessibilité et utilitaires */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;background:var(--accent);color:#03161b;padding:8px 12px;border-radius:8px;z-index:1000}

/* Focus visible amélioré */
:focus{outline:2px solid var(--accent);outline-offset:2px}

/* Motion safe */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto;transition:none!important}
}

/* Apparition douce au scroll */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(10px)}
  .reveal.in{opacity:1;transform:none;transition:opacity .6s ease, transform .6s ease}
}
