/* ===== Modern 2025 UI ===== */
:root{
  --bg:#0b0c0e; --surface:#0f1115; --panel:#141722; --fg:#e8ecf1;
  --muted:#9ba8b4; --line:#242a36; --primary:#7aa2ff; --accent:#6be7d4; --accent2:#a78bfa;
  --radius:16px; --shadow:0 6px 20px rgba(0,0,0,.35);
}
:root.light{
  --bg:#f7f9fc; --surface:#fff; --panel:#fff; --fg:#0b0c0e; --muted:#5b616e; --line:#e5e8f0;
  --primary:#3b82f6; --accent:#06b6d4; --accent2:#8b5cf6; --shadow:0 6px 18px rgba(10,20,40,.08);
}
*{box-sizing:border-box}
html{font-size:16px}
body{margin:0;background:linear-gradient(180deg,var(--bg) 0%, #0d0f14 80%, var(--bg) 100%);color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,Apple Color Emoji,Segoe UI Emoji;line-height:1.65}
:root.light body{background:linear-gradient(180deg,#f7f9fc 0%, #f2f5fb 80%, #f7f9fc 100%)}
.container{max-width:1080px;margin:0 auto;padding:1.25rem}
a{color:var(--primary);text-decoration:none} a:hover{text-decoration:underline;text-underline-offset:3px}
.small{font-size:.9rem}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(11,12,14,.7);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
:root.light .site-header{background:rgba(255,255,255,.7)}
.header-inner{display:flex;align-items:center;gap:1rem}
.logo{font-weight:800;color:#fff;text-decoration:none;padding:.9rem 0}
.nav{margin-left:auto;display:flex;gap:.25rem;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:.25rem}
.nav-link{padding:.55rem .8rem;border-radius:8px;color:var(--fg)}
.nav-link.active{background:linear-gradient(135deg,rgba(122,162,255,.15),rgba(167,139,250,.15));border:1px solid rgba(122,162,255,.35)}
.theme-toggle{margin-left:.25rem;background:transparent;border:1px solid var(--line);border-radius:10px;padding:.35rem .55rem;color:var(--fg)}
.nav-toggle{display:none;margin-left:.5rem;color:var(--fg);background:transparent;border:1px solid var(--line);border-radius:10px;padding:.35rem .55rem}
@media (max-width:780px){
  .nav{display:none}
  .nav.show{display:flex;flex-direction:column;gap:.35rem;position:absolute;top:58px;right:1rem;background:var(--panel);border:1px solid var(--line);padding:.6rem;border-radius:12px}
  .nav-toggle{display:inline-block}
}

/* Hero */
.hero{padding:1.2rem 0 0}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:1.25rem;background:linear-gradient(135deg,rgba(122,162,255,.12),rgba(107,231,212,.08));border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;box-shadow:var(--shadow)}
.hero img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);background:#000}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}}
.kpis{display:flex;gap:1rem;flex-wrap:wrap;margin:1rem 0 0}
.kpi{background:rgba(255,255,255,.03);border:1px solid var(--line);padding:.6rem .8rem;border-radius:12px}

/* Cards & grids */
.card,.case-card,.price-card{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));border:1px solid var(--line);border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow);transition:transform .2s, box-shadow .2s;display:flex;flex-direction:column}
.card:hover,.case-card:hover,.price-card:hover{transform:translateY(-3px)}
.grid.two{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}
.grid.three{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
@media (max-width:900px){.grid.two,.grid.three{grid-template-columns:1fr}}

/* Chips */
.badges,.tags{display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:.75rem 0 0;list-style:none}
.badges li,.tag{border:1px solid var(--line);padding:.28rem .55rem;border-radius:999px;background:rgba(255,255,255,.04);font-size:.92rem}
.tag.blue{border-color:rgba(122,162,255,.45);background:rgba(122,162,255,.12)}
.tag.teal{border-color:rgba(107,231,212,.45);background:rgba(107,231,212,.12)}
.tag.purple{border-color:rgba(167,139,250,.45);background:rgba(167,139,250,.12)}

.breadcrumb{font-size:.95rem;color:var(--muted);margin:.25rem 0 1rem}
.breadcrumb a{color:inherit}

/* Cases */
.cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:1080px){.cases-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.cases-grid{grid-template-columns:1fr}}
.case-card{position:relative;min-height:380px;padding-top:28px}
.case-head{position:relative;z-index:1;padding-top:.2rem;display:flex;flex-direction:column;gap:.4rem}
.case-sector{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.case-body{flex:1;display:flex;flex-direction:column;gap:.35rem}
.case-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto}
.ribbon{position:absolute;top:10px;left:10px;background:linear-gradient(135deg,var(--accent2),var(--primary));color:#fff;padding:.25rem .6rem;border-radius:8px;font-size:.8rem;box-shadow:var(--shadow);z-index:2}

/* Pricing */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:900px){.pricing{grid-template-columns:1fr}}
.price-card{min-height:420px}
.price-card .cta{margin-top:auto;display:flex;justify-content:space-between;align-items:center}
.badge{position:absolute;top:12px;right:12px;background:linear-gradient(135deg,var(--accent),var(--primary));color:#fff;border-radius:999px;padding:.2rem .5rem;font-size:.8rem}

/* Image slots */
.img-slot{display:block;width:100%;border:1px dashed var(--line);border-radius:12px;background:rgba(255,255,255,.02);overflow:hidden}
.img-slot>img{width:100%;height:100%;object-fit:cover;display:block}
.img-16x9{aspect-ratio:16/9}.img-4x3{aspect-ratio:4/3}.img-1x1{aspect-ratio:1/1}
.img-caption{color:var(--muted);font-size:.9rem;margin:.35rem 0 0}

/* Contact & Expertise */
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:1rem}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.expertise-wrap{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:900px){.expertise-wrap{grid-template-columns:1fr}}

/* Reveal */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .5s ease, transform .5s ease}
.reveal.in{opacity:1;transform:none}

/* Footer */
.site-footer{border-top:1px solid var(--line);margin-top:3rem;background:rgba(255,255,255,.02)}
.site-footer .small{color:var(--muted)}

/* ==== Modern form (floating labels) ==== */
.form{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:.5rem}
@media (max-width:900px){.form{grid-template-columns:1fr}}
.field{position:relative}
.field input,.field textarea,.field select{
  width:100%;padding:1rem .9rem .9rem;border:1px solid var(--line);
  border-radius:12px;background:rgba(255,255,255,.03);color:var(--fg);outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.field textarea{min-height:180px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:transparent}
.field label{
  position:absolute;left:.8rem;top:.85rem;color:var(--muted);pointer-events:none;background:transparent;
  transition:all .15s ease;padding:0 .25rem;
}
.field input:focus,.field textarea:focus{
  border-color:rgba(122,162,255,.55);box-shadow:0 0 0 4px rgba(122,162,255,.15)
}
.field input:not(:placeholder-shown)+label,
.field textarea:not(:placeholder-shown)+label,
.field input:focus+label,.field textarea:focus+label{
  top:-.55rem;font-size:.82rem;background:var(--surface);color:var(--primary);
}
.form .span-2{grid-column:span 2}
@media (max-width:900px){.form .span-2{grid-column:span 1}}
.form .actions{display:flex;justify-content:flex-end;align-items:center;gap:1rem}
.notice{
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));
  border:1px dashed var(--line);border-radius:12px;padding:.8rem;color:var(--muted)
}
.triplet { display: grid; grid-auto-rows: auto; gap: .15rem; margin: 0; }
.triplet strong { display:block; }
.triplet span { display:block; }
/* --- Contact page: buttons, actions & helpers --- */
.button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .65rem 1rem;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  color: inherit;
  text-decoration: none;
  border-radius: .6rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: transform .06s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.button:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.25); }
.button:active { transform: translateY(0); }
.button:focus-visible { outline: 2px solid var(--accent, #38bdf8); outline-offset: 2px; }

.button.primary {
  border-color: transparent;
  background: var(--accent, #38bdf8);
  color: #0b1224;
  box-shadow: 0 6px 16px rgba(56,189,248,.25);
}
.button.primary:hover { box-shadow: 0 8px 18px rgba(56,189,248,.32); }

.button.ghost {
  background: transparent;
  border-color: rgba(255,255,255,.18);
  opacity: .92;
}
.button.ghost:hover { opacity: 1; }

/* CTA inline sous coordonnées */
.cta-inline { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }

/* Form actions */
.form .actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  justify-content: flex-end;
  margin-top: .25rem;
}
.form .actions .hint { margin-right: auto; opacity: .8; }

/* Notice de la page contact (fallback si pas défini ailleurs) */
.notice {
  padding: .75rem 1rem;
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: .6rem;
  background: rgba(255,255,255,.03);
}

/* Honeypot (caché visuellement, accessible aux bots) */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Image slot ratio (fallback si non défini) */
.img-slot { position: relative; overflow: hidden; border-radius: .6rem; }
.img-4x3 { aspect-ratio: 4 / 3; }
.img-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Accessibilité : screen-reader only (fallback) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}