@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root { --bg:#05060b; --surface:#0b0d16; --surface-2:#101321; --text:#f5f7ff; --muted:#9298aa; --line:rgba(255,255,255,.13); --accent:#6d5dfc; --cyan:#3e9cff; }
* { box-sizing:border-box; }
.icon { display:inline-block; width:1em; height:1em; vertical-align:-.125em; flex-shrink:0; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:'Manrope', sans-serif; font-size:16px; line-height:1.6; overflow-x:hidden; }
body:before { content:''; position:fixed; inset:0; pointer-events:none; background:radial-gradient(circle at 75% 16%, rgba(69,75,255,.12), transparent 28%), radial-gradient(circle at 18% 65%, rgba(45,148,255,.06), transparent 24%); z-index:-2; }
.ambient-canvas { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; opacity:.8; z-index:-1; }
.aurora { position:fixed; width:62vw; height:38vw; min-width:520px; min-height:320px; border-radius:50%; filter:blur(70px); pointer-events:none; z-index:-3; opacity:.18; mix-blend-mode:screen; animation: aurora-drift 18s ease-in-out infinite alternate; }
.aurora-violet { top:-16vw; right:-12vw; background:radial-gradient(ellipse, rgba(113,76,255,.85), rgba(69,47,220,.12) 56%, transparent 72%); }
.aurora-blue { bottom:-22vw; left:-18vw; background:radial-gradient(ellipse, rgba(26,145,255,.64), rgba(39,77,220,.08) 58%, transparent 72%); animation-delay:-8s; animation-duration:23s; }
.scan-grid { position:fixed; inset:-35%; pointer-events:none; z-index:-2; opacity:.13; background-image:linear-gradient(rgba(119,125,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(119,125,255,.16) 1px, transparent 1px); background-size:72px 72px; transform:perspective(500px) rotateX(58deg) translateY(12%); transform-origin:center; animation:grid-drift 24s linear infinite; mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.8) 25%, rgba(0,0,0,.8) 72%, transparent 100%); }
@keyframes aurora-drift { 0% { transform:translate3d(-4%, -2%, 0) rotate(-8deg) scale(1); } 50% { transform:translate3d(3%, 5%, 0) rotate(4deg) scale(1.08); } 100% { transform:translate3d(-2%, 8%, 0) rotate(11deg) scale(.96); } }
@keyframes grid-drift { from { background-position:0 0; } to { background-position:0 144px; } }
@media (prefers-reduced-motion: reduce) { .aurora, .scan-grid { animation:none; } }
.noise { position:fixed; inset:0; opacity:.035; pointer-events:none; z-index:10; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
a { color:inherit; text-decoration:none; }
.section-shell, .site-header { width:min(1180px, calc(100% - 64px)); margin-inline:auto; }
.site-header { min-height:88px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:12px; letter-spacing:.14em; font-weight:700; font-size:14px; }
.brand-mark { font-size:23px; letter-spacing:-.12em; font-weight:800; }.brand-mark span { color:var(--accent); }.brand-name { padding-left:8px; }
.nav { display:flex; align-items:center; gap:35px; color:var(--muted); font-size:13px; }.nav a:hover, .text-link:hover { color:var(--text); }.nav-cta { border:1px solid var(--line); padding:9px 14px; color:var(--text); transition:.25s; }.nav-cta:hover { border-color:var(--accent); background:rgba(109,93,252,.12); }.nav-cta span { margin-left:12px; color:var(--accent); }
.hero { min-height:650px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:54px; padding:70px 0 100px; }.eyebrow, .section-kicker, .visual-caption, .card-index, .site-footer { font-family:'DM Mono', monospace; text-transform:uppercase; letter-spacing:.15em; font-size:11px; color:var(--muted); }.eyebrow { display:flex; align-items:center; gap:10px; }.eyebrow-line { width:32px; height:1px; background:var(--accent); }.hero h1 { font-size:clamp(58px, 8vw, 108px); line-height:.96; letter-spacing:-.085em; margin:26px 0 28px; font-weight:700; }.hero h1 em, h2 span { color:var(--accent); font-style:normal; }.hero-text { max-width:490px; color:var(--muted); font-size:17px; }.hero-actions { display:flex; align-items:center; gap:28px; margin-top:38px; }.button { display:inline-flex; gap:22px; align-items:center; padding:15px 20px; font-size:13px; font-weight:700; }.button-primary { background:var(--text); color:#070810; }.button-primary span { color:var(--accent); font-size:18px; }.text-link { font-size:13px; color:var(--muted); border-bottom:1px solid var(--line); padding-bottom:4px; }.text-link span { margin-left:12px; color:var(--accent); }
.hero-visual { position:relative; min-height:410px; display:grid; place-items:center; }.hero-visual img { position:relative; width:min(90%, 530px); mix-blend-mode:screen; opacity:.93; border-radius:4px; filter:saturate(1.1) contrast(1.08); }.halo { position:absolute; border:1px solid rgba(109,93,252,.22); border-radius:50%; transform:rotate(-26deg); }.halo-one { width:90%; height:55%; box-shadow:0 0 70px rgba(66,90,255,.16); }.halo-two { width:70%; height:80%; border-color:rgba(62,156,255,.18); }.grid-orbit { position:absolute; width:45%; height:45%; border:1px solid rgba(255,255,255,.08); border-radius:50%; }.grid-orbit-one { transform:rotate(40deg) scaleX(1.7); }.grid-orbit-two { transform:rotate(-40deg) scaleX(1.7); border-color:rgba(109,93,252,.17); }.visual-caption { position:absolute; right:0; bottom:10px; display:flex; gap:12px; align-items:center; }.caption-rule { width:44px; height:1px; background:var(--accent); }
.statement { padding:120px 0; border-top:1px solid var(--line); }.statement-grid { display:grid; grid-template-columns:1fr 1fr; gap:70px; margin-top:25px; }.statement h2, .section-heading h2, .contact h2 { font-size:clamp(37px, 5vw, 67px); line-height:1.03; letter-spacing:-.07em; margin:0; }.statement p:not(.section-kicker) { color:var(--muted); max-width:490px; font-size:16px; margin:8px 0; }
.expertises { padding:30px 0 135px; }.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:60px; }.heading-note { max-width:280px; color:var(--muted); font-size:14px; margin:0 0 6px; }.expertise-list { border-top:1px solid var(--line); }.expertise-card { display:grid; grid-template-columns:80px 1fr 40px; gap:26px; align-items:start; padding:29px 0; border-bottom:1px solid var(--line); transition:.3s; }.expertise-card:hover { padding-left:13px; background:linear-gradient(90deg, rgba(109,93,252,.1), transparent 75%); }.card-index { padding-top:8px; color:var(--accent); }.expertise-card h3 { margin:0 0 7px; font-size:23px; letter-spacing:-.035em; }.expertise-card p { margin:0; color:var(--muted); max-width:650px; font-size:14px; }.card-arrow { font-size:23px; color:var(--accent); padding-top:1px; }
.projects { padding:30px 0 125px; border-top:1px solid var(--line); }.project-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }.project-card { min-height:390px; display:flex; flex-direction:column; justify-content:space-between; padding:0 23px 24px; background:linear-gradient(145deg, rgba(109,93,252,.23), rgba(15,17,31,.92) 62%); border:1px solid rgba(139,129,255,.3); position:relative; overflow:hidden; transition:transform .35s, border-color .35s, box-shadow .35s; }.project-image { height:145px; margin:0 -23px 21px; overflow:hidden; position:relative; }.project-image:after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,6,11,.05), rgba(5,6,11,.85)); }.project-image img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.82) contrast(1.08); transition:transform .6s, filter .6s; }.project-card:hover .project-image img { transform:scale(1.07); filter:saturate(1.08) contrast(1.08); }.project-card:before { content:''; position:absolute; width:260px; height:260px; border:1px solid rgba(255,255,255,.17); border-radius:50%; right:-60px; top:-80px; box-shadow:0 0 0 22px rgba(255,255,255,.025), 0 0 0 44px rgba(255,255,255,.018); pointer-events:none; }.project-card:hover { transform:translateY(-7px); border-color:var(--accent); box-shadow:0 18px 55px rgba(51,41,160,.24); }.project-card-alt { background:linear-gradient(145deg, rgba(28,111,190,.22), rgba(15,17,31,.94) 62%); border-color:rgba(62,156,255,.28); }.project-card-dunder { background:linear-gradient(145deg, rgba(58,58,58,.23), rgba(10,10,10,.96) 62%); border-color:rgba(255,255,255,.2); }.project-topline { display:flex; justify-content:space-between; align-items:center; position:relative; z-index:1; }.project-arrow { color:var(--accent); font-size:25px; }.project-card-alt .project-arrow { color:var(--cyan); }.project-card-dunder .project-arrow { color:#e8c864; }.project-type, .project-url { font-family:'DM Mono', monospace; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); font-size:10px; }.project-card h3 { font-size:clamp(31px, 3.2vw, 47px); line-height:.98; letter-spacing:-.06em; margin:14px 0 25px; position:relative; z-index:1; }.project-card h3 span { color:var(--accent); }.project-card-alt h3 span { color:var(--cyan); }.project-card-dunder h3 span { color:#e8c864; }.project-url { margin:0; font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vision { padding:125px 0; display:grid; grid-template-columns:1fr 2.3fr; gap:70px; border-top:1px solid var(--line); }.vision-label { display:flex; flex-direction:column; gap:26px; }.vision-label p:last-child { margin-top:auto; }.vertical-rule { height:100px; width:1px; background:linear-gradient(var(--accent), transparent); }.vision-copy { max-width:770px; }.vision-lead { font-size:clamp(30px, 4vw, 54px); line-height:1.1; letter-spacing:-.06em; margin:0 0 20px; }.vision-copy > p:nth-child(2) { font-size:clamp(30px, 4vw, 54px); line-height:1.1; letter-spacing:-.06em; color:var(--accent); margin:0; }.vision-small { color:var(--muted); max-width:460px; font-size:16px; margin:42px 0 0; }
.contact { padding:100px 0 130px; display:flex; justify-content:space-between; align-items:flex-end; gap:40px; border-top:1px solid var(--line); }.contact-links { display:flex; flex-direction:column; align-items:flex-end; gap:15px; }.contact-link { font-size:clamp(16px, 2vw, 24px); padding-bottom:7px; border-bottom:1px solid var(--accent); }.contact-link span { color:var(--accent); margin-left:26px; }.site-footer { padding:25px 0 36px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; color:#6e7485; }
.reveal { opacity:0; transform:translateY(25px); transition:opacity .7s ease, transform .7s ease; }.reveal.is-visible { opacity:1; transform:none; }
@media (max-width:960px) { .project-grid { grid-template-columns:repeat(2, 1fr); } }
.button-whatsapp { background:#25d366; color:#041109; box-shadow:0 0 28px rgba(37,211,102,.16); }.button-whatsapp span { font-size:18px; }
.contact-whatsapp { margin-top:8px; }
.hero-actions .button { min-width:174px; min-height:52px; justify-content:space-between; white-space:nowrap; }.button-outline { border:1px solid rgba(255,255,255,.26); color:var(--text); background:rgba(255,255,255,.035); }.button-outline span { color:var(--accent); font-size:18px; }.hero-actions { gap:12px; flex-wrap:wrap; }

/* --- Formulaire de contact --- */
.contact-form-section { flex-wrap:wrap; align-items:flex-start; }
.contact-intro { max-width:420px; }
.contact-form { flex:1 1 380px; max-width:460px; display:flex; flex-direction:column; gap:16px; background:var(--surface); border:1px solid var(--line); padding:28px; border-radius:6px; }
.contact-form label { display:flex; flex-direction:column; gap:8px; font-family:'DM Mono', monospace; font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); }
.contact-form input, .contact-form textarea { font-family:'Manrope', sans-serif; font-size:14px; color:var(--text); background:var(--surface-2); border:1px solid var(--line); border-radius:4px; padding:12px 14px; resize:vertical; }
.contact-form input:focus, .contact-form textarea:focus { outline:none; border-color:var(--accent); }
.contact-form button { align-self:flex-start; border:none; cursor:pointer; }
.hp-field { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }

/* --- Alertes (partagées avec l'admin) --- */
.admin-alert { padding:12px 16px; border-radius:4px; font-size:13px; border:1px solid transparent; }
.admin-alert-success { background:rgba(37,211,102,.12); border-color:rgba(37,211,102,.4); color:#8ff0b8; }
.admin-alert-error { background:rgba(255,90,90,.1); border-color:rgba(255,90,90,.4); color:#ff9a9a; }
.admin-alert-info { background:rgba(62,156,255,.1); border-color:rgba(62,156,255,.4); color:#a9d3ff; }
@media (max-width:960px) { .contact-form-section { flex-direction:column; } .contact-intro { max-width:none; } .contact-links { align-items:flex-start; } }

/* --- Crédit avec liens au survol (footer) --- */
.credit { position:relative; color:var(--text); border-bottom:1px dotted var(--muted); cursor:default; }
/* opacity/pointer-events (pas visibility:hidden) : les liens restent atteignables
   au clavier (Tab) même invisibles, pour que :focus-within fonctionne. */
.credit-links { position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(4px); display:flex; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:8px 10px; white-space:nowrap; font-family:'DM Mono', monospace; font-size:10px; text-transform:uppercase; letter-spacing:.08em; opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; z-index:5; }
.credit-links a { color:var(--accent); display:inline-flex; align-items:center; gap:5px; }
.credit-links a:hover { color:var(--text); }
.credit:hover .credit-links, .credit:focus-within .credit-links { opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }

/* --- Responsive --- */
@media (max-width:760px) {
  .section-shell, .site-header { width:min(1180px, calc(100% - 40px)); }
  .site-header { flex-wrap:wrap; justify-content:center; text-align:center; min-height:auto; padding:18px 0; row-gap:14px; }
  .nav { flex-wrap:wrap; justify-content:center; gap:12px 20px; }

  .hero { grid-template-columns:1fr; padding:48px 0 64px; gap:40px; }
  .hero-visual { min-height:280px; }
  .hero-actions { flex-direction:column; align-items:stretch; gap:14px; }
  .hero-actions .button { width:100%; min-width:0; }

  .statement-grid { grid-template-columns:1fr; gap:24px; }

  .section-heading { flex-direction:column; align-items:flex-start; gap:14px; }

  .project-grid { grid-template-columns:1fr; }

  .vision { grid-template-columns:1fr; gap:36px; padding:80px 0; }

  .contact { flex-direction:column; align-items:flex-start; gap:32px; }

  .site-footer { flex-direction:column; gap:8px; text-align:left; }
  .site-footer span { overflow-wrap:break-word; }

  /* Le survol n'existe pas au tactile : les liens restent visibles en ligne,
     et peuvent revenir à la ligne (plus de nowrap hérité de la version
     "infobulle" desktop) pour ne jamais déborder sur petit écran. */
  .credit-links { position:static; display:inline-flex; flex-wrap:wrap; row-gap:4px; opacity:1; pointer-events:auto; transform:none; background:none; border:none; padding:0; margin-left:8px; white-space:normal; transition:none; }
}