:root {
  --bg:#06060A; --lime:#C6FF3D; --menthe:#3DFFD2; --violet:#7B5CFF; --bleu:#2E7BFF; --rose:#FF3D9A;
  --txt:#fff; --doux:rgba(255,255,255,.72); --pale:rgba(255,255,255,.5); --ligne:rgba(255,255,255,.12);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
html, body { margin:0; }
body { background:var(--bg); color:var(--txt); font:17px/1.6 Inter,system-ui,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img, video { display:block; max-width:100%; }
a { color:inherit; }
.w { max-width:1180px; margin:0 auto; padding:0 24px; }
em.v { font-style:normal; background:linear-gradient(90deg,var(--lime),var(--menthe)); -webkit-background-clip:text; background-clip:text; color:transparent; }
h1, h2, h3 { font-family:Unbounded,sans-serif; font-weight:800; letter-spacing:-.03em; margin:0; }
h2 { font-size:clamp(32px,5.4vw,64px); line-height:1.04; }
.sur { font:700 13px Inter,sans-serif; letter-spacing:.22em; text-transform:uppercase; color:var(--lime); margin:0 0 18px; }
.lead { font-size:clamp(18px,2vw,21px); color:var(--doux); max-width:640px; margin:22px 0 0; }
section { position:relative; padding:120px 0; }

/* Halos de lumière (fond) */
.halo { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.halo::before, .halo::after { content:''; position:absolute; width:60vw; height:60vw; max-width:820px; max-height:820px; border-radius:50%; filter:blur(120px); opacity:.45; }
.halo::before { background:var(--violet); left:-20vw; top:-10vw; }
.halo::after { background:var(--bleu); right:-25vw; bottom:-20vw; opacity:.35; }
.halo.rose::after { background:var(--rose); opacity:.28; }
section > .w { position:relative; z-index:1; }

/* Boutons */
.btn { display:inline-flex; align-items:center; gap:10px; border:0; border-radius:99px; background:var(--lime); color:#0A0A0E; font:700 17px Inter,sans-serif; padding:18px 30px; text-decoration:none; cursor:pointer; box-shadow:0 0 44px rgba(198,255,61,.35); transition:transform .2s, box-shadow .2s; }
.btn:hover { transform:translateY(-2px); box-shadow:0 0 60px rgba(198,255,61,.5); }
.btn svg { flex:none; }
.btn.creux { background:transparent; color:#fff; box-shadow:none; border:1.5px solid rgba(255,255,255,.3); }
.btn.creux:hover { border-color:#fff; }

/* En-tête */
header { position:fixed; top:0; left:0; right:0; z-index:50; transition:background .3s, border-color .3s; border-bottom:1px solid transparent; }
header.plein { background:rgba(6,6,10,.82); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-color:var(--ligne); }
header .w { display:flex; align-items:center; justify-content:space-between; height:76px; gap:20px; }
.logo { display:flex; align-items:center; gap:12px; text-decoration:none; font:700 13px Inter,sans-serif; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; }
.logo b { font:800 16px Unbounded,sans-serif; letter-spacing:-.04em; color:#0A0A0E; background:var(--lime); width:40px; height:40px; border-radius:12px; display:grid; place-items:center; }
.logo span { color:var(--pale); }
nav { display:flex; gap:22px; }
nav a { text-decoration:none; font-weight:600; font-size:14px; color:var(--doux); white-space:nowrap; }
header .btn { white-space:nowrap; }
@media (max-width:1380px) { nav { display:none; } }
nav a:hover { color:#fff; }
header .btn { padding:12px 22px; font-size:15px; }

/* Accueil */
.accueil { min-height:100vh; display:flex; align-items:center; padding:130px 0 80px; }
.accueil .w { display:grid; grid-template-columns:1.15fr .85fr; gap:50px; align-items:center; }
.accueil h1 { font-size:clamp(42px,6.6vw,88px); line-height:.98; }
.accueil .lead { font-size:clamp(19px,2.1vw,23px); }
.actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }
.stores { margin-top:34px; font-weight:600; color:var(--pale); font-size:15px; }
.stores strong { color:#fff; }
.photo-accueil { position:relative; border-radius:34px; overflow:hidden; aspect-ratio:4/5; box-shadow:0 40px 120px rgba(123,92,255,.35); }
.photo-accueil img { width:100%; height:100%; object-fit:cover; object-position:50% 60%; }

/* Services */
.services { padding:40px 0 110px; }
.trois { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--ligne); }
.trois > div { padding-block:40px 10px; padding-inline:0 34px; }
.trois > div + div { padding-inline-start:34px; border-inline-start:1px solid var(--ligne); }
.trois .n { font:800 15px Unbounded,sans-serif; color:var(--lime); }
.trois h3 { font-size:clamp(22px,2.4vw,30px); line-height:1.1; margin:14px 0 12px; }
.trois p { color:var(--doux); margin:0; }

/* Métiers */
.entete { display:flex; justify-content:space-between; align-items:end; gap:40px; flex-wrap:wrap; margin-bottom:60px; }
.metier { display:grid; grid-template-columns:1.2fr .8fr; gap:0; min-height:560px; border-radius:34px; overflow:hidden; background:#0E0E15; border:1px solid var(--ligne); margin-bottom:28px; }
.metier:nth-child(even) .metier-photo { order:2; }
.metier-photo { position:relative; overflow:hidden; }
.metier-photo > img { width:100%; height:100%; object-fit:cover; object-position:30% 30%; position:absolute; inset:0; }
.metier:nth-child(even) .metier-photo > img { object-position:70% 30%; }
.metier-photo::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(6,6,10,.75)); }
.metier-txt { padding:56px 52px; display:flex; flex-direction:column; justify-content:center; position:relative; }
.metier-txt .sur { margin-bottom:14px; }
.metier-txt h3 { font-size:clamp(28px,3.2vw,44px); line-height:1.05; }
.metier-txt ul { list-style:none; padding:0; margin:30px 0 0; display:grid; gap:14px; }
.metier-txt li { display:flex; gap:14px; align-items:flex-start; font-size:18px; font-weight:500; }
.metier-txt li::before { content:''; flex:none; width:22px; height:22px; margin-top:3px; border-radius:50%; background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0E' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat; }

/* Téléphone en 3D */
.tel { position:absolute; z-index:2; width:min(30%,210px); aspect-ratio:9/19.3; right:5%; bottom:6%; border-radius:38px; padding:9px; background:linear-gradient(145deg,#3a3a44,#0d0d12 40%,#2a2a33); box-shadow:0 50px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08) inset; transform:perspective(1300px) rotateY(-16deg) rotateX(5deg) rotateZ(2deg); transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.metier:nth-child(even) .tel { right:auto; left:5%; transform:perspective(1300px) rotateY(16deg) rotateX(5deg) rotateZ(-2deg); }
.metier:hover .tel { transform:perspective(1300px) rotateY(-6deg) rotateX(2deg) translateY(-8px); }
.metier:nth-child(even):hover .tel { transform:perspective(1300px) rotateY(6deg) rotateX(2deg) translateY(-8px); }
.tel img { width:100%; height:100%; object-fit:cover; object-position:top; border-radius:30px; background:#fff; }
.tel::before { content:''; position:absolute; top:16px; left:50%; translate:-50% 0; width:30%; height:18px; border-radius:20px; background:#000; z-index:1; }

/* Live */
.live { background:linear-gradient(180deg,var(--bg),#100A1A 30%,#100A1A 70%,var(--bg)); }
.live .w { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.live-vis { position:relative; min-height:640px; }
.live-vis .ph { position:absolute; left:0; top:0; width:72%; height:88%; border-radius:30px; overflow:hidden; }
.live-vis .ph img { width:100%; height:100%; object-fit:cover; }
.live-vis .tel { width:min(52%,290px); right:0; bottom:0; }
.direct { display:inline-block; background:#FF2E5F; color:#fff; font:800 13px Inter,sans-serif; letter-spacing:.14em; padding:7px 14px; border-radius:8px; margin-bottom:22px; }
.gros-list { list-style:none; padding:0; margin:34px 0 0; display:grid; gap:22px; }
.gros-list li { padding-inline-start:22px; border-inline-start:3px solid var(--lime); }
.gros-list b { display:block; font:700 20px Unbounded,sans-serif; letter-spacing:-.02em; margin-bottom:2px; }
.gros-list span { color:var(--doux); }

/* Aussi */
.aussi { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:56px; }
.aussi figure { margin:0; position:relative; border-radius:22px; overflow:hidden; aspect-ratio:4/5; }
.aussi img { width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.aussi figure:hover img { transform:scale(1.05); }
.aussi figcaption { position:absolute; left:0; right:0; bottom:0; padding:60px 20px 18px; background:linear-gradient(transparent,rgba(6,6,10,.9)); font:700 18px Unbounded,sans-serif; letter-spacing:-.02em; }
.fin-aussi { margin-top:36px; font-size:20px; color:var(--doux); }
.fin-aussi b { color:#fff; }

/* Pourquoi */
.pourquoi-g { display:grid; grid-template-columns:repeat(3,1fr); gap:56px 50px; margin-top:70px; }
.pourquoi-g .n { font:800 64px/1 Unbounded,sans-serif; background:linear-gradient(180deg,var(--lime),rgba(198,255,61,.15)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pourquoi-g h3 { font-size:24px; margin:16px 0 10px; }
.pourquoi-g p { color:var(--doux); margin:0; }

/* Bandeau pleine largeur (concurrents) */
.bandeau { padding:0; min-height:88vh; display:flex; align-items:center; overflow:hidden; }
.bandeau > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 55%; }
.bandeau::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(6,6,10,.94) 0%,rgba(6,6,10,.7) 50%,rgba(6,6,10,.25)); }
.bandeau .w { z-index:2; padding-top:120px; padding-bottom:120px; width:100%; }
.bandeau h2 { font-size:clamp(36px,6vw,80px); max-width:900px; }

/* Deux colonnes photo + texte */
.duo .w { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.duo.inverse .duo-photo { order:2; }
.duo-photo { border-radius:34px; overflow:hidden; aspect-ratio:4/5; }
.duo-photo img { width:100%; height:100%; object-fit:cover; }
.chiffre { display:flex; align-items:baseline; gap:18px; margin-top:40px; padding-top:34px; border-top:1px solid var(--ligne); }
.chiffre b { font:800 clamp(64px,8vw,104px)/.9 Unbounded,sans-serif; color:var(--lime); letter-spacing:-.05em; }
.chiffre span { font-size:19px; color:var(--doux); max-width:260px; }

/* Vidéo */
.video-bloc { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; align-items:center; }
.video-bloc video { width:100%; max-width:360px; border-radius:30px; background:#000; box-shadow:0 40px 100px rgba(123,92,255,.35); margin:0 auto; }

/* Contact */
.contact .w { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start; }
.garanties { list-style:none; padding:0; margin:36px 0 0; display:grid; gap:16px; font-size:19px; font-weight:600; }
.garanties li { display:flex; gap:14px; }
.garanties li::before { content:'→'; color:var(--lime); font-weight:800; }
form { border-radius:30px; padding:34px 30px; display:grid; gap:18px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); box-shadow:0 30px 80px rgba(0,0,0,.45); }
label { font:600 14px Inter,sans-serif; color:var(--doux); display:block; }
input, select { width:100%; margin-top:8px; padding:16px 17px; border:1.5px solid rgba(255,255,255,.14); background:rgba(0,0,0,.35); color:#fff; font:500 17px Inter,sans-serif; border-radius:16px; -webkit-appearance:none; appearance:none; }
select { background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%); background-position:calc(100% - 22px) 52%,calc(100% - 16px) 52%; background-size:6px 6px; background-repeat:no-repeat; }
select option { background:#141418; }
input:focus, select:focus { outline:none; border-color:var(--lime); box-shadow:0 0 0 4px rgba(198,255,61,.15); }
input::placeholder { color:rgba(255,255,255,.35); }
.choix-t { font:600 14px Inter,sans-serif; color:var(--doux); }
.choix { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:8px; }
.choix label { margin:0; min-height:56px; font:600 15px Inter,sans-serif; color:#fff; border:1.5px solid rgba(255,255,255,.14); background:rgba(0,0,0,.25); padding:14px 13px; border-radius:14px; cursor:pointer; display:flex; gap:10px; align-items:center; }
.choix label:has(input:checked) { border-color:var(--lime); background:rgba(198,255,61,.12); }
.choix input { width:18px; height:18px; margin:0; padding:0; accent-color:#C6FF3D; -webkit-appearance:auto; appearance:auto; flex:none; }
form .btn { justify-content:center; width:100%; font-size:18px; margin-top:4px; }
form .btn:disabled { opacity:.6; cursor:wait; transform:none; }
.err { color:#FFB4D2; margin:0; font-size:15px; }
.err:empty { display:none; }
.note { font-size:13px; color:var(--pale); text-align:center; margin:0; }
.ok { border-radius:30px; padding:56px 28px; text-align:center; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); }
.ok .rond { width:76px; height:76px; margin:0 auto 20px; border-radius:50%; background:var(--lime); box-shadow:0 0 40px rgba(198,255,61,.5); display:grid; place-items:center; }
.ok h3 { font-size:34px; margin:0 0 10px; }
.ok p { color:var(--doux); margin:0; }

footer { border-top:1px solid var(--ligne); padding:44px 0 50px; color:var(--pale); font-size:15px; }
footer .w { display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }

/* Apparition au défilement */
.apparait { opacity:0; transform:translateY(30px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.apparait.vu { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { .apparait { opacity:1; transform:none; transition:none; } html { scroll-behavior:auto; } }

/* Tablette */
@media (max-width:980px) {
  nav { display:none; }
  section { padding:90px 0; }
  .accueil .w, .live .w, .duo .w, .video-bloc, .contact .w { grid-template-columns:1fr; gap:46px; }
  .duo.inverse .duo-photo { order:0; }
  .photo-accueil { aspect-ratio:4/3.6; }
  .metier { grid-template-columns:1fr; min-height:0; }
  .metier:nth-child(even) .metier-photo { order:0; }
  .metier-photo { min-height:520px; }
  .metier-txt { padding:38px 30px 42px; }
  .trois { grid-template-columns:1fr; }
  .trois > div, .trois > div + div { padding:30px 0; border-inline-start:0; border-bottom:1px solid var(--ligne); }
  .aussi { grid-template-columns:repeat(2,1fr); }
  .pourquoi-g { grid-template-columns:1fr 1fr; gap:44px 34px; }
  .duo-photo { aspect-ratio:4/3.4; }
}
/* Téléphone */
@media (max-width:600px) {
  body { font-size:16px; }
  .w { padding:0 18px; }
  header .w { height:66px; }
  .logo { font-size:11px; letter-spacing:.1em; gap:10px; }
  .logo span { display:none; }
  header .btn { padding:10px 16px; font-size:14px; }
  .accueil { padding-top:104px; }
  .actions .btn { width:100%; justify-content:center; }
  .metier-photo { min-height:440px; }
  .tel { width:min(52%,210px); }
  .metier .tel { width:36%; bottom:4%; right:4%; }
  .metier:nth-child(even) .tel { left:4%; }
  .metier-photo > img { object-position:22% 15%; }
  .metier:nth-child(even) .metier-photo > img { object-position:78% 15%; }
  .live-vis { min-height:500px; }
  .pourquoi-g { grid-template-columns:1fr; }
  .aussi { gap:12px; }
  .aussi figcaption { font-size:15px; padding:40px 14px 14px; }
  .choix { grid-template-columns:1fr; }
  form { padding:26px 20px; }
  .bandeau::after { background:linear-gradient(180deg,rgba(6,6,10,.55),rgba(6,6,10,.92)); }
}

/* Bouton de langue */
.langue { text-decoration:none; font-weight:700; font-size:15px; color:#fff; padding:10px 16px; border-radius:99px; border:1.5px solid rgba(255,255,255,.25); white-space:nowrap; }
.langue:hover { border-color:#fff; }
.droite { display:flex; align-items:center; gap:12px; }

/* Version en hébreu (de droite à gauche) */
[dir=rtl] body { font-family:Heebo,Inter,system-ui,sans-serif; }
[dir=rtl] h1, [dir=rtl] h2, [dir=rtl] h3, [dir=rtl] .pourquoi-g .n, [dir=rtl] .chiffre b, [dir=rtl] .gros-list b, [dir=rtl] .aussi figcaption, [dir=rtl] .trois .n { font-family:Rubik,Heebo,sans-serif; letter-spacing:-.01em; }
[dir=rtl] .sur { letter-spacing:.06em; font-family:Heebo,sans-serif; }
[dir=rtl] .btn, [dir=rtl] nav a, [dir=rtl] label, [dir=rtl] input, [dir=rtl] select, [dir=rtl] .choix label, [dir=rtl] .langue { font-family:Heebo,Inter,sans-serif; }
[dir=rtl] .btn svg { transform:scaleX(-1); }
[dir=rtl] .garanties li::before { content:'←'; }
[dir=rtl] .bandeau::after { background:linear-gradient(270deg,rgba(6,6,10,.94) 0%,rgba(6,6,10,.7) 50%,rgba(6,6,10,.25)); }
[dir=rtl] select { background-position:16px 52%,22px 52%; }
[dir=rtl] input[type=tel] { direction:ltr; text-align:right; }
@media (max-width:600px) {
  .droite { gap:8px; }
  .langue { padding:9px 12px; font-size:14px; }
  [dir=rtl] .bandeau::after { background:linear-gradient(180deg,rgba(6,6,10,.55),rgba(6,6,10,.92)); }
}

/* Piège anti-robots du formulaire : invisible pour les visiteurs */
.piege { position:absolute !important; width:1px; height:1px; margin:0; padding:0; overflow:hidden; clip-path:inset(50%); opacity:0; pointer-events:none; }
html { overflow-x:clip; }

/* Menu sur téléphone et tablette : bouton à deux traits, rubriques en grand plein écran */
.burger { display:none; width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); cursor:pointer; padding:0; position:relative; flex:none; }
.burger span { position:absolute; left:13px; right:13px; height:2px; background:#fff; border-radius:2px; transition:transform .3s, top .3s; }
.burger span:first-child { top:18px; } .burger span:last-child { top:26px; }
.menu-ouvert .burger span:first-child { top:22px; transform:rotate(45deg); }
.menu-ouvert .burger span:last-child { top:22px; transform:rotate(-45deg); }
@media (max-width:1380px) {
  .burger { display:block; }
  header nav#menu { display:flex; position:fixed; left:0; right:0; top:0; height:100vh; height:100dvh; z-index:-1; flex-direction:column; justify-content:center; gap:4px; padding:90px 28px 40px; background:rgba(6,6,10,.97); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; }
  header nav#menu a { font:800 clamp(24px,6.8vw,40px)/1.25 Unbounded,sans-serif; color:#fff; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.08); }
  header nav#menu a:active { color:var(--lime); }
  .menu-ouvert header nav#menu { opacity:1; visibility:visible; }
  .menu-ouvert { overflow:hidden; }
  .menu-ouvert header { background:transparent; border-color:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; }
}
[dir=rtl] header nav#menu a { font-family:Rubik,Heebo,sans-serif; }

/* Logo : « Développement Web » + sous-titre ; sur téléphone sur deux lignes pour que « Studio » reste visible */
.logo i { font-style:normal; }
@media (max-width:600px) {
  .logo i { display:flex; flex-direction:column; line-height:1.25; }
  .logo span { display:block !important; font-size:9px; letter-spacing:.22em; color:var(--lime); }
  .logo .pt { display:none !important; }
}
/* Expérience : 18 ans + références */
.experience .w { display:grid; grid-template-columns:.8fr 1.2fr; gap:60px; align-items:center; }
.xp-chiffre { text-align:center; }
.xp-chiffre b { display:block; font:800 clamp(120px,20vw,260px)/.9 Unbounded,sans-serif; letter-spacing:-.06em; background:linear-gradient(135deg,#C6FF3D,#3DFFD2); -webkit-background-clip:text; background-clip:text; color:transparent; }
.xp-chiffre span { display:block; font:700 clamp(18px,2.4vw,26px) Unbounded,sans-serif; color:#fff; margin-top:6px; }
.ref-t { font:700 13px Inter,sans-serif; letter-spacing:.18em; text-transform:uppercase; color:var(--pale); margin:30px 0 10px; }
.refs { list-style:none; margin:0; padding:0; }
.refs li { display:flex; flex-direction:column; gap:4px; padding:16px 0; border-bottom:1px solid var(--ligne); }
.refs b { font:800 clamp(20px,2.6vw,28px) Unbounded,sans-serif; color:#fff; }
.refs span { color:var(--doux); font-size:15px; }
@media (max-width:980px) { .experience .w { grid-template-columns:1fr; gap:24px; } }
[dir=rtl] .xp-chiffre span { font-family:Rubik,Heebo,sans-serif; }

/* ================================================================
   DIRECTION ARTISTIQUE « PREMIUM » (novembre 2026)
   Principe : le vert fluo devient une signature rare, pas une couleur partout.
   - Il reste sur : le logo, les boutons d'action, le grand titre d'accueil, le « 18 ».
   - Les mots forts des autres titres passent en blanc atténué (titres bicolores, très haut de gamme).
   - Plus de halos lumineux autour des boutons, halos de couleur du fond adoucis et fondus.
   Pour revenir à l'ancienne version : supprimer ce bloc.
   ================================================================ */
em.v { background:none; -webkit-background-clip:border-box; background-clip:border-box; color:rgba(255,255,255,.46); }
.accueil h1 em.v { color:var(--lime); }
.sur { color:var(--pale); display:flex; align-items:center; gap:14px; }
.sur::before { content:''; width:28px; height:2px; background:var(--lime); flex:none; }
.btn { box-shadow:none; }
.btn:hover { box-shadow:0 10px 30px rgba(198,255,61,.18); }
.halo { -webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent); mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent); }
.halo::before { opacity:.22; }
.halo::after { opacity:.16; }
.halo.rose::after { opacity:.12; }
.photo-accueil, .video-bloc video { box-shadow:0 40px 100px rgba(0,0,0,.55); }
.direct { background:rgba(255,46,95,.1); color:#FF8AA3; border:1px solid rgba(255,46,95,.35); font-weight:700; }
.metier-txt li::before { background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C6FF3D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat; border:1.5px solid rgba(198,255,61,.45); box-sizing:border-box; }
.pourquoi-g .n { background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.08)); -webkit-background-clip:text; background-clip:text; }
.chiffre b { color:#fff; }
.gros-list li { border-inline-start:2px solid rgba(198,255,61,.5); }
.ok .rond { box-shadow:none; }
.xp-chiffre b { background:none; color:var(--lime); }
em.v { color:rgba(255,255,255,.58); }
/* Le vert est réservé aux 3 messages clés : l'accroche, « Et vous ? », « sans frais ». */
.accueil h1 em.v, .bandeau h2 em.v, #budget h2 em.v { color:var(--lime); }

/* Accueil : visuel carré des trois applis */
.photo-accueil { aspect-ratio:1/1 !important; }
.photo-accueil img { object-position:50% 50%; }

/* ================================================================
   TYPOGRAPHIE PREMIUM (novembre 2026) : titres en Manrope, plus fins et élégants.
   Unbounded reste la signature : logo « MZ » et grand « 18 ».
   ================================================================ */
h1, h2, h3, .gros-list b, .refs b, .chiffre b, .pourquoi-g .n, .aussi figcaption, .trois .n, .xp-chiffre span, header nav#menu a {
  font-family:Manrope,Inter,sans-serif; font-weight:800; letter-spacing:-.04em; }
h1 { line-height:1.0; }
h2 { line-height:1.06; }
h3 { letter-spacing:-.03em; }
.gros-list b { letter-spacing:-.02em; }
.sur { letter-spacing:.16em; font-size:12px; }
.btn { font-family:Manrope,Inter,sans-serif; font-weight:800; letter-spacing:-.01em; }
/* Téléphone : moins de vide entre les parties */
@media (max-width:600px) { section { padding:64px 0; } .services { padding-top:24px; } }

/* Méthode en 4 étapes */
.etapes { list-style:none; margin:50px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.etapes li { border-top:1px solid var(--ligne); padding-top:26px; }
.etapes .n { font:800 15px Manrope,Inter,sans-serif; color:var(--lime); letter-spacing:.04em; }
.etapes h3 { font-size:24px; margin:14px 0 10px; }
.etapes p { color:var(--doux); margin:0; font-size:16px; line-height:1.55; }
@media (max-width:980px) { .etapes { grid-template-columns:1fr 1fr; } }
@media (max-width:600px) { .etapes { grid-template-columns:1fr; gap:6px; margin-top:30px; } .etapes li { padding:20px 0; } }
/* Questions fréquentes */
.faq-liste { margin-top:40px; max-width:860px; }
.faq details { border-bottom:1px solid var(--ligne); }
.faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px 0; font:700 19px/1.35 Manrope,Inter,sans-serif; letter-spacing:-.01em; color:#fff; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary svg { flex:none; color:var(--lime); transition:transform .3s; }
.faq details[open] summary svg { transform:rotate(180deg); }
.faq details p { margin:0 0 24px; color:var(--doux); max-width:720px; }
[dir=rtl] .faq summary, [dir=rtl] .etapes h3 { font-family:Rubik,Heebo,sans-serif; }

/* Appel découverte (téléphone / WhatsApp) */
.tel-direct { margin:14px 0 0; font-size:15px; color:var(--pale); }
.tel-direct a { color:#fff; font-weight:700; text-decoration:none; border-bottom:1px solid var(--lime); }
.appel { margin:30px 0 6px; padding:24px; border:1px solid var(--ligne); border-radius:22px; background:rgba(255,255,255,.03); display:grid; gap:6px; }
.appel b { font:800 21px Manrope,Inter,sans-serif; letter-spacing:-.02em; }
.appel > span { color:var(--doux); font-size:16px; }
.appel-btns { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.appel-btns .btn { padding:14px 22px; font-size:16px; }
[dir=rtl] .appel b { font-family:Rubik,Heebo,sans-serif; }

/* Sécurité */
.secu { list-style:none; margin:44px 0 0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.secu li { border:1px solid var(--ligne); border-radius:22px; padding:24px 20px; background:rgba(255,255,255,.03); display:flex; flex-direction:column; gap:8px; }
.secu svg { color:var(--lime); margin-bottom:6px; }
.secu b { font:800 18px/1.25 Manrope,Inter,sans-serif; letter-spacing:-.02em; }
.secu span { color:var(--doux); font-size:15px; line-height:1.5; }
.secu li:last-child { border-color:rgba(198,255,61,.45); }
@media (max-width:1100px) { .secu { grid-template-columns:1fr 1fr; } }
@media (max-width:600px) { .secu { grid-template-columns:1fr; } }

/* Tarifs */
.plans { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px; max-width:1100px; }
.plan { position:relative; border:1px solid var(--ligne); border-radius:26px; padding:30px 24px; background:rgba(255,255,255,.03); display:flex; flex-direction:column; }
.plan.fort { border-color:rgba(198,255,61,.55); background:linear-gradient(180deg,rgba(198,255,61,.07),rgba(255,255,255,.02)); }
.plan h3 { font-size:21px; margin:0; }
.prix { margin:16px 0 20px; color:var(--pale); font-size:15px; }
.prix b { font:800 42px Manrope,Inter,sans-serif; letter-spacing:-.04em; color:#fff; }
.prix .eur { display:block; margin-top:4px; font:600 16px Manrope,Inter,sans-serif; color:var(--pale); }
.plan ul { list-style:none; margin:0 0 26px; padding:0; display:grid; gap:11px; flex:1; }
.plan li { display:flex; gap:10px; align-items:flex-start; font-size:15px; color:var(--doux); line-height:1.45; }
.plan li b { color:#fff; font-weight:700; }
.plan li svg { flex:none; color:var(--lime); margin-top:2px; }
.plan .btn { justify-content:center; width:100%; padding:15px 18px; font-size:16px; }
.badge { position:absolute; top:-12px; inset-inline-start:24px; background:var(--lime); color:#0A0A0E; font:800 12px Manrope,Inter,sans-serif; letter-spacing:.06em; text-transform:uppercase; padding:6px 12px; border-radius:99px; }
.note-tarifs { margin:26px 0 0; color:var(--pale); font-size:15px; }
@media (max-width:980px) { .plans { grid-template-columns:1fr; max-width:520px; } }
/* Notification hebdomadaire */
.notif .w { display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center; }
.ecran-notif { border-radius:44px; padding:40px 18px 30px; min-height:520px; background:radial-gradient(80% 60% at 30% 10%,#5b46c9,transparent 70%),radial-gradient(70% 60% at 90% 90%,#1f5ed1,transparent 70%),#151527; border:8px solid #1d1d24; box-shadow:0 40px 100px rgba(0,0,0,.6); max-width:380px; margin:0 auto; width:100%; }
.ecran-notif .heure { text-align:center; font:700 64px/1 Manrope,Inter,sans-serif; letter-spacing:-.03em; }
.ecran-notif .date { text-align:center; color:rgba(255,255,255,.75); font-weight:600; margin:6px 0 34px; }
.nt { display:flex; gap:12px; align-items:flex-start; background:rgba(255,255,255,.16); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-radius:20px; padding:13px 14px; margin-bottom:10px; position:relative; }
.nt i { flex:none; width:38px; height:38px; border-radius:10px; background:#F2D1DC; color:#7a2440; font:800 14px/38px Manrope,sans-serif; font-style:normal; text-align:center; }
.nt b { display:block; font-size:15px; }
.nt span { display:block; font-size:14px; line-height:1.35; color:rgba(255,255,255,.9); padding-inline-end:52px; }
.nt em { position:absolute; top:13px; inset-inline-end:14px; font-style:normal; font-size:12px; color:rgba(255,255,255,.6); }
.nt:nth-child(4) { opacity:.75; } .nt:nth-child(5) { opacity:.5; }
@media (max-width:980px) { .notif .w { grid-template-columns:1fr; gap:36px; } }

.prix .pays-il, .prix .pays { display:inline-block; font:700 11px Manrope,Inter,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--pale); border:1px solid var(--ligne); border-radius:99px; padding:4px 9px; margin-inline-end:8px; vertical-align:middle; }
.prix .pays-il { display:block; width:max-content; margin-bottom:8px; }
.prix .eur { margin-top:10px; font-size:18px; color:#fff; }

/* 4 formules dont « sur mesure » */
.plans { grid-template-columns:repeat(4,1fr); max-width:none; }
.plan.mesure { background:linear-gradient(160deg,rgba(123,92,255,.16),rgba(255,255,255,.02) 60%); border-color:rgba(123,92,255,.45); }
.prix .consulter { display:block; font:800 34px/1.1 Manrope,Inter,sans-serif; letter-spacing:-.03em; color:#fff; }
@media (max-width:1200px) { .plans { grid-template-columns:1fr 1fr; } }
@media (max-width:640px) { .plans { grid-template-columns:1fr; } }
.plan ul { align-content:start; }

.prix .mois { display:block; margin-top:6px; font:700 15px Manrope,Inter,sans-serif; color:var(--lime); letter-spacing:0; }

/* Nouveau logo (piste A) : le trait continu M-Z avec la pastille rose */
.logo svg.mz { width:60px; height:34px; flex:none; overflow:visible; }
@media (max-width:600px) { .logo svg.mz { width:53px; height:30px; } }
/* Logo « Développement Web » : sur petit téléphone, sous-titre plus serré pour garder le bouton visible */
@media (max-width:480px) { .logo { letter-spacing:.04em; gap:8px; } .logo i { font-size:11px; } .logo span { display:none !important; } .logo svg.mz { width:46px; height:26px; } }
@media (max-width:340px) { .droite .btn { display:none; } }

/* Référencement (10/11/2026) : sous-titre discret dans le H1 de l'accueil */
.accueil h1 .h1-sous { display:block; margin-top:20px; font:600 clamp(14px,1.5vw,17px)/1.4 Inter,sans-serif; letter-spacing:.02em; color:var(--pale); }
/* Pied de page : « Nous intervenons à … » */
footer .villes { flex-basis:100%; margin:0; font-size:13px; line-height:1.8; color:var(--pale); }
footer .villes a { color:inherit; text-decoration:none; border-bottom:1px solid var(--ligne); }
footer .villes a:hover { color:#fff; }
/* Pages villes (création d'application à Netanya, Tel Aviv…) */
.ville-hero { padding:170px 0 70px; }
.ville-hero h1 { font-size:clamp(34px,5.2vw,66px); line-height:1.04; max-width:980px; }
.ville-txt { padding:40px 0 70px; }
.ville-txt .w > div { max-width:780px; }
.ville-txt h2, .ville-bloc h2 { font-size:clamp(26px,3.6vw,40px); margin:0 0 18px; }
.ville-txt p { color:var(--doux); margin:0 0 18px; }
.ville-txt ul { color:var(--doux); margin:0 0 18px; padding-inline-start:22px; }
.ville-txt a, .ville-bloc .lien { color:#fff; font-weight:600; }
.ville-bloc { padding:60px 0; }
.ville-bloc .plans { grid-template-columns:repeat(3,1fr); }
@media (max-width:980px) { .ville-bloc .plans { grid-template-columns:1fr; } }
.liste-villes { list-style:none; margin:24px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.liste-villes a { display:inline-block; padding:10px 18px; border:1px solid var(--ligne); border-radius:99px; text-decoration:none; color:var(--doux); font-weight:600; font-size:15px; }
.liste-villes a:hover { color:#fff; border-color:#fff; }
@media (max-width:600px) { .ville-hero { padding:120px 0 40px; } .ville-txt { padding:20px 0 40px; } .ville-bloc { padding:44px 0; } }