/* ============================================================
   ILIES — VFX · 3D · Films de marque
   Direction : noir, touche de blanc. Grille de points + verre
   dépoli (liquid glass) sur fond sombre, halo blanc en spot.
   ============================================================ */

:root{
  --bg:          #0a0a09;
  --dot:         rgba(255,255,255,.09);
  --ink:         #f5f3ee;
  --ink-soft:    rgba(245,243,238,.64);
  --ink-faint:   rgba(245,243,238,.36);
  --accent:      #ffffff;
  --accent-ink:  #0a0a09;

  --glass-bg:      rgba(255,255,255,.07);
  --glass-bg-soft: rgba(255,255,255,.04);
  --glass-border:  rgba(255,255,255,.16);

  --f-display: 'Montserrat', 'Arial Black', sans-serif;
  --f-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  color-scheme: dark;
}

/* ---------- barre du haut : logo à gauche, menu à droite ---------- */
.topbar{
  position:sticky; top:0; z-index:600;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 26px;
  background:rgba(10,10,9,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, background .2s ease;
}
.topbar-logo{ display:block; flex:none; }
.topbar-logo img{ height:52px; width:auto; display:block; }

.corner-nav{ display:flex; align-items:center; gap:26px; }
.corner-nav a.link{
  font-family:var(--f-body); font-weight:600; font-size:12px;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none;
  padding-bottom:3px; border-bottom:1px solid transparent;
}
.corner-nav a.link:hover,
.corner-nav a.link.active{ color:var(--ink); border-color:var(--accent); }
.hamburger{
  display:none; flex:none;
  width:44px; height:44px; border-radius:12px;
  background:rgba(255,255,255,.1); border:1px solid var(--glass-border);
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  cursor:pointer;
}
.hamburger span{
  display:block; width:20px; height:2px; background:var(--ink);
  transition:transform .25s ease, opacity .25s ease;
}
.hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:900;
  background:rgba(10,10,9,.98);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:40px;
  opacity:0; pointer-events:none; transform:translateY(-8px);
  transition:opacity .25s ease, transform .25s ease;
}
.mobile-menu.is-open{ opacity:1; pointer-events:auto; transform:translateY(0); }
.mobile-menu nav{ display:flex; flex-direction:column; align-items:center; gap:28px; }
.mobile-menu nav a.link{
  font-family:var(--f-display); font-weight:800; font-size:32px;
  color:var(--ink); text-decoration:none; text-transform:uppercase;
}
.mobile-menu nav a.link:active{ color:var(--accent); }
.mobile-menu-foot{ display:flex; gap:22px; }
.mobile-menu-foot a{
  font-family:var(--f-body); font-weight:600; font-size:13px;
  color:var(--ink-soft); text-decoration:none;
}

@media (max-width:640px){
  .topbar{ padding:14px 16px; }
  .topbar-logo img{ height:36px; }
  .corner-nav{ display:none; }
  .hamburger{ display:flex; }
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

/* grille de points, fixe, derrière tout le contenu */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-2;
  background-image:radial-gradient(circle, var(--dot) 1.4px, transparent 1.4px);
  background-size:24px 24px;
}

/* halo qui suit le curseur : fait ressortir les points juste en dessous */
body::after{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(circle, rgba(255,255,255,.85) 1.4px, transparent 1.4px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(circle 220px at var(--mx,50%) var(--my,40%), black 0%, transparent 100%);
  mask-image:radial-gradient(circle 220px at var(--mx,50%) var(--my,40%), black 0%, transparent 100%);
  opacity:0; transition:opacity .3s ease;
}
html.has-mouse body::after{ opacity:1; }
@media (prefers-reduced-motion: reduce){ body::after{ display:none; } }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.wrap{ max-width:640px; margin:0 auto; padding:0 20px; position:relative; z-index:1; }

/* halo de couleur derrière le haut de page, pour teinter le verre dépoli */
.blob{
  position:absolute; z-index:-1; border-radius:50%;
  filter:blur(70px); pointer-events:none;
}
.blob-a{
  width:560px; height:560px; top:-200px; left:50%; transform:translateX(-52%);
  background:radial-gradient(circle, rgba(255,255,255,.16), transparent 70%);
}
.blob-b{
  width:380px; height:380px; top:160px; right:50%; transform:translateX(65%);
  background:radial-gradient(circle, rgba(255,255,255,.07), transparent 70%);
}

/* ---------- animations d'apparition : CSS pur, classe posée sur <html> avant le rendu ---------- */
.reveal{ opacity:1; transform:none; }
html.js-reveal .reveal{ opacity:0; transform:translateY(14px); }
html.js-reveal .reveal.is-visible{
  animation:revealUp .6s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay:var(--d, 0s);
}
@keyframes revealUp{ to{ opacity:1; transform:translateY(0); } }

/* ================= HERO ================= */
#hero{ padding:64px 0 30px; text-align:center; }
#hero.has-video{ position:relative; overflow:hidden; }
.hero-video{
  position:absolute; inset:0; z-index:0;
  overflow:hidden;
}
.hero-video video{
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.42) saturate(1.1);
}
.hero-video::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,9,.35) 0%, rgba(10,10,9,.55) 55%, var(--bg) 100%);
}
#hero.has-video .wrap{ position:relative; z-index:1; }
.avatar{
  width:96px; height:96px; border-radius:50%; margin:0 auto 22px;
  background:var(--glass-bg-soft);
  border:1px solid var(--glass-border);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-body); font-size:9px; color:var(--ink-faint);
  text-align:center; line-height:1.3; overflow:hidden;
  box-shadow:0 10px 34px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.05);
}
.avatar img{ width:100%; height:100%; object-fit:cover; }

.wordmark{
  font-family:var(--f-display); font-weight:800; font-style:italic;
  font-size:38px; letter-spacing:-.01em; margin:0; color:var(--ink);
  text-transform:uppercase;
}
.logo-mark{
  width:min(320px, 80vw); height:auto; margin:0 auto; display:block;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.5));
}
.tagline{
  font-family:var(--f-body); font-weight:600; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);
  margin:8px 0 26px;
}

/* ---------- switch de langue FR/EN ---------- */
.lang-switch{
  position:absolute; top:24px; right:24px; z-index:20;
  display:inline-flex; gap:2px; padding:4px;
  background:var(--glass-bg-soft); border:1px solid var(--glass-border);
  border-radius:999px;
}
.lang-btn{
  font-family:var(--f-body); font-weight:700; font-size:11px;
  letter-spacing:.04em; padding:6px 12px; border-radius:999px;
  background:none; border:none; color:var(--ink-faint); cursor:pointer;
  position:relative; z-index:1;
  transition:color .25s ease;
}
.lang-btn.is-active{ color:var(--accent-ink); }
.lang-switch::before{
  content:""; position:absolute; top:4px; bottom:4px; left:4px;
  width:calc(50% - 5px); border-radius:999px; background:var(--accent);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.lang-switch:has(.lang-btn[data-lang="en"].is-active)::before{
  transform:translateX(calc(100% + 2px));
}
@media (max-width:480px){ .lang-switch{ position:static; justify-content:center; margin-bottom:18px; } }

/* ---------- transition entre les blocs de langue ---------- */
.lang-block{
  transition:opacity .28s ease, transform .28s ease;
  opacity:1; transform:translateY(0);
}
.lang-block.is-switching{ opacity:0; transform:translateY(8px); }

/* pilule de navigation, façon segmented control */
.segnav{
  display:inline-flex; gap:4px; padding:5px;
  background:var(--glass-bg-soft);
  border:1px solid var(--glass-border);
  border-radius:999px;
  box-shadow:inset 0 1.5px 1px rgba(255,255,255,.5), inset 0 -4px 10px rgba(0,0,0,.10);
}
.segnav a{
  font-family:var(--f-body); font-weight:600; font-size:14px;
  padding:9px 20px; border-radius:999px; color:var(--ink-soft);
  transition:background .15s ease, color .15s ease;
}
.segnav a.active{
  background:var(--accent); color:var(--accent-ink);
  box-shadow:0 4px 14px rgba(0,0,0,.4);
}

/* ================= section générique ================= */
section{ padding:56px 0 10px; }
.section-head{ text-align:center; margin-bottom:26px; }
.section-head h2{
  font-family:var(--f-display); font-weight:800; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);
  margin:0;
}

/* ================= cartes en pilule (liquid glass) ================= */
.stack{ display:flex; flex-direction:column; gap:14px; }

.pill{
  display:flex; align-items:center; gap:14px;
  padding:14px 18px; border-radius:999px;
  background:var(--glass-bg);
  backdrop-filter:blur(16px) saturate(1.8) brightness(1.12);
  -webkit-backdrop-filter:blur(16px) saturate(1.8) brightness(1.12);
  border:1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -10px 22px rgba(0,0,0,.4),
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 16px 40px rgba(0,0,0,.5);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
a.pill:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.32); }

.pill-icon{
  flex:none; width:44px; height:44px; border-radius:14px;
  background:linear-gradient(150deg, rgba(255,255,255,.24), rgba(255,255,255,.04));
  color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-weight:800; font-size:11px;
  letter-spacing:.02em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -4px 8px rgba(0,0,0,.4),
    0 4px 10px rgba(0,0,0,.35);
}
.pill-icon svg{ width:20px; height:20px; fill:currentColor; }
.pill-icon.vfx,
.pill-icon.brand,
.pill-icon.perso{ background:linear-gradient(150deg, rgba(255,255,255,.26), rgba(255,255,255,.05)); }

.pill-icon.whatsapp{ background:linear-gradient(150deg, #3fdb6a, #1a9e46); color:#fff; }
.pill-icon.instagram{ background:linear-gradient(135deg, #f9ce34, #ee2a7b, #6228d7); color:#fff; }
.pill-icon.tiktok{ background:#0a0a09; color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.15), inset 2px 0 0 #25f4ee, inset -2px 0 0 #fe2c55; }
.pill-icon.email{ background:linear-gradient(150deg, #6b6558, #2e2b25); color:#fff; }

.pill-icon.thumb{
  padding:0; overflow:hidden; background:#000;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.22),
    0 4px 10px rgba(0,0,0,.4);
}
.pill-icon.thumb img{ width:100%; height:100%; object-fit:cover; }

.pill-body{ flex:1; min-width:0; }
.pill-body .t{
  font-family:var(--f-body); font-weight:700; font-size:15px; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pill-body .s{
  font-family:var(--f-body); font-size:12.5px; color:var(--ink-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pill-go{ flex:none; color:var(--ink-faint); font-size:18px; }
a.pill:hover .pill-go{ color:var(--accent); }

.pill-tag{
  flex:none; font-family:var(--f-body); font-weight:600; font-size:11px;
  color:var(--ink-faint); background:rgba(255,255,255,.08);
  padding:5px 11px; border-radius:999px; white-space:nowrap;
}

.works-more{
  text-align:center; font-size:13px; color:var(--ink-soft); margin-top:20px;
}
.works-more a{ font-weight:600; color:var(--ink); border-bottom:1px solid var(--ink-faint); }
.works-more a:hover{ color:var(--accent); border-color:var(--accent); }

/* ================= grille de travaux (book), plein cadre sur noir ================= */
.grid-works{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:40px;
  width:100%; padding:0 24px 24px;
}
.grid-tile{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  padding:0; margin:0; border:0; background:#000; cursor:pointer;
  display:block; width:100%; border-radius:0;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
.grid-tile:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 50px rgba(0,0,0,.5);
}
.grid-tile img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.grid-tile:hover img{ transform:scale(1.06); }

.grid-tile-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .4s ease;
}
.grid-tile-video.is-playing{ opacity:1; }
.grid-tile:hover .grid-tile-video{ transform:scale(1.06); transition:opacity .4s ease, transform .4s ease; }

.grid-tile-overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.82) 100%);
  padding:14px; text-align:left;
}
.grid-tile-play{
  position:absolute; top:12px; right:12px;
  width:32px; height:32px; border-radius:50%;
  background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.5); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; backdrop-filter:blur(4px);
  transition:background .2s ease, transform .2s ease;
}
.grid-tile:hover .grid-tile-play{
  background:rgba(255,255,255,.92); color:#0a0a09; transform:scale(1.08);
}
.grid-tile-title{
  font-family:var(--f-body); font-weight:700; font-size:14px; color:#fff;
}
.grid-tile-sub{
  font-family:var(--f-body); font-size:11.5px; color:rgba(255,255,255,.72);
  margin-top:2px;
}

@media (max-width:900px){
  .grid-works{ gap:26px; padding:0 20px 20px; }
}
@media (max-width:560px){
  /* une carte par ligne, empilées verticalement, sur téléphone */
  .grid-works{ grid-template-columns:1fr; gap:16px; padding:0 16px 20px; }
  .grid-tile-title{ font-size:12px; }
  .grid-tile-sub{ display:none; }
}

/* ================= portrait (page à propos) ================= */
.portrait{
  aspect-ratio:4/5; border-radius:24px; overflow:hidden;
  background:var(--glass-bg-soft); border:1px solid var(--glass-border);
  box-shadow:0 16px 40px rgba(0,0,0,.5);
  position:sticky; top:100px;
}
.portrait img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:760px){
  #apropos .wrap > div{ grid-template-columns:1fr !important; }
  .portrait{ max-width:220px; margin:0 auto; position:static; }
}

/* ================= lightbox vidéo ================= */
.lightbox{
  position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,.92);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.lightbox[hidden]{ display:none; }
.lightbox-frame{
  width:100%; max-width:min(1100px, 94vw); max-height:92vh;
  border-radius:18px; overflow:hidden; background:#000;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.lightbox-frame video{ width:100%; height:100%; max-height:92vh; display:block; }
.lightbox-close{
  position:absolute; top:20px; right:20px;
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25);
  color:#fff; font-size:16px; cursor:pointer;
}
.lightbox-close:hover{ background:rgba(255,255,255,.2); }

/* ================= À PROPOS (carte pleine) ================= */
.card-block{
  border-radius:32px;
  background:var(--glass-bg);
  backdrop-filter:blur(16px) saturate(1.8) brightness(1.12);
  -webkit-backdrop-filter:blur(16px) saturate(1.8) brightness(1.12);
  border:1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -10px 22px rgba(0,0,0,.4),
    0 16px 40px rgba(0,0,0,.5);
  padding:32px 28px;
}
.note p{ color:var(--ink-soft); font-size:16px; line-height:1.7; margin:0 0 24px; max-width:60ch; }
.note p:last-child{ margin-bottom:0; }
.note p strong{ color:var(--ink); font-weight:700; }
.note .signature{ font-size:12px; color:var(--ink-faint); font-style:italic; }

.note .lede{
  font-family:var(--f-display); font-weight:700; font-size:22px;
  line-height:1.4; color:var(--ink); max-width:22ch; margin-bottom:28px;
}
.note .role{
  display:inline-block; font-family:var(--f-body); font-weight:700;
  color:var(--ink); background:rgba(255,255,255,.1);
  padding:2px 8px; border-radius:6px;
}
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.chip{
  font-family:var(--f-body); font-weight:600; font-size:12.5px;
  color:var(--ink); background:rgba(255,255,255,.08);
  border:1px solid var(--glass-border);
  padding:6px 13px; border-radius:999px;
}
.note .label{
  font-family:var(--f-body); font-weight:600; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);
  margin-bottom:10px; display:block;
}

/* ================= CONTACT ================= */
.contact-form .field{ margin-bottom:18px; }
.contact-form .field label{
  display:block; font-weight:600; font-size:12px;
  letter-spacing:.04em; color:var(--ink-faint); margin-bottom:6px;
  text-transform:uppercase;
}
.contact-form .field input,
.contact-form .field select,
.contact-form .field textarea{
  width:100%; background:rgba(255,255,255,.06); border:1px solid var(--glass-border);
  border-radius:14px;
  color:var(--ink); font-family:var(--f-body); font-size:15px; padding:11px 14px;
  outline:none;
}
.contact-form .field select option{ background:#161512; color:var(--ink); }
.contact-form .field input:focus,
.contact-form .field select:focus,
.contact-form .field textarea:focus{ border-color:var(--accent); }
.contact-form .field textarea{ resize:vertical; min-height:80px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:480px){ .field-row{ grid-template-columns:1fr; } }

.contact-submit{ margin-top:6px; }
.contact-submit button{
  width:100%; font-family:var(--f-body); font-size:15px; font-weight:700;
  padding:14px 22px; border-radius:999px;
  background:var(--accent); border:1px solid var(--accent); color:var(--accent-ink); cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.4);
}
.contact-submit button:hover{ background:#e7e4dc; border-color:#e7e4dc; }
.contact-submit .direct{
  display:block; text-align:center; font-size:13px; color:var(--ink-soft); margin-top:14px;
}
.contact-submit .direct a{ font-weight:600; color:var(--ink); border-bottom:1px solid var(--ink-faint); }
.contact-submit .direct a:hover{ color:var(--accent); border-color:var(--accent); }

.form-notice{
  font-size:13px; padding:12px 16px; margin-bottom:18px; border-radius:14px;
  background:rgba(255,255,255,.06); border:1px solid var(--glass-border);
  color:var(--ink);
}
.form-notice.success{ color:#8fe0b0; }
.form-notice.error{ color:#ff9d92; }

/* ---------- formulaire en étapes ---------- */
.form-steps{
  display:flex; justify-content:center; gap:8px; margin-bottom:26px;
}
.form-step-dot{
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.18);
  transition:background .2s ease, transform .2s ease;
}
.form-step-dot.is-active{ background:var(--accent); transform:scale(1.25); }
.form-step-dot.is-done{ background:rgba(255,255,255,.5); }

.form-step{ display:none; }
.form-step.is-active{ display:block; animation:stepIn .3s ease; }
@keyframes stepIn{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:translateY(0);} }

.form-step-nav{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:20px;
}
.form-step-nav button{
  font-family:var(--f-body); font-size:14px; font-weight:600;
  background:none; border:none; color:var(--ink-soft); cursor:pointer;
  padding:8px 4px;
}
.form-step-nav .step-next{
  margin-left:auto; color:var(--ink);
  padding:10px 20px; border-radius:999px; background:rgba(255,255,255,.08);
  border:1px solid var(--glass-border);
}
.form-step-nav .step-next:hover{ background:rgba(255,255,255,.16); }
.form-step-nav .step-back:hover{ color:var(--ink); }

.field-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- prestations : cartes avec photo ---------- */
.services-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;
  padding:0 24px 40px;
}
.service-card{
  position:relative; aspect-ratio:3/4; overflow:hidden; display:block;
  background:#000; text-decoration:none;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
.service-card:hover{ transform:translateY(-6px); box-shadow:0 24px 50px rgba(0,0,0,.5); }
.service-card img{
  width:100%; height:100%; object-fit:cover; object-position:center 25%;
  filter:saturate(.85) contrast(1.08) brightness(.92);
  transition:transform .5s ease;
}
.service-card:hover img{ transform:scale(1.06); }
.service-card-tint{
  position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(75,58,164,.22), rgba(10,10,9,.35));
  mix-blend-mode:multiply;
}
.service-card-overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:linear-gradient(180deg, rgba(0,0,0,.05) 25%, rgba(0,0,0,.92) 100%);
  padding:22px; text-align:left;
}
.service-card-cta{
  display:flex; align-items:center; gap:6px;
  font-family:var(--f-body); font-weight:700; font-size:12.5px;
  color:#fff; margin-top:14px; padding-top:12px;
  border-top:1px solid rgba(255,255,255,.2);
}
.service-card-cta .go{
  display:inline-flex; transition:transform .2s ease; color:var(--accent);
}
.service-card:hover .service-card-cta .go{ transform:translateX(4px); }
.service-card-tag{
  position:absolute; top:16px; right:16px;
  font-family:var(--f-body); font-weight:600; font-size:10.5px;
  color:var(--ink); background:rgba(255,255,255,.14);
  border:1px solid var(--glass-border);
  padding:5px 11px; border-radius:999px; backdrop-filter:blur(4px);
}
.service-card-title{
  font-family:var(--f-display); font-weight:800; font-size:19px; color:#fff;
  text-transform:uppercase; letter-spacing:.01em;
}
.service-card-sub{
  font-family:var(--f-body); font-size:12.5px; color:rgba(255,255,255,.75);
  margin-top:6px; line-height:1.4;
}
@media (max-width:900px){
  .services-grid{ grid-template-columns:repeat(2, 1fr); gap:16px; padding:0 20px 32px; }
}
@media (max-width:560px){
  .services-grid{ grid-template-columns:1fr; gap:14px; padding:0 16px 28px; }
}

/* ---------- CTA (bas de page à propos) ---------- */
.cta-block{
  text-align:center; padding:56px 24px;
  border-radius:32px;
  background:var(--glass-bg);
  backdrop-filter:blur(16px) saturate(1.8) brightness(1.12);
  -webkit-backdrop-filter:blur(16px) saturate(1.8) brightness(1.12);
  border:1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -10px 22px rgba(0,0,0,.4),
    0 16px 40px rgba(0,0,0,.5);
}
.cta-kicker{
  font-family:var(--f-body); font-weight:600; font-size:14px;
  color:var(--ink-soft); margin:0 0 18px;
}
.cta-btn{
  display:inline-block; font-family:var(--f-body); font-weight:700; font-size:16px;
  padding:16px 34px; border-radius:999px;
  background:var(--accent); color:var(--accent-ink);
  box-shadow:0 12px 30px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.cta-btn:hover{ transform:translateY(-2px); background:#e7e4dc; box-shadow:0 16px 36px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.5); }

/* ---------- bouton WhatsApp flottant ---------- */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:600;
  width:54px; height:54px; border-radius:50%;
  background:linear-gradient(150deg, #3fdb6a, #1a9e46); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(26,158,70,.45);
  border:1px solid rgba(255,255,255,.4);
  transition:transform .15s ease, box-shadow .15s ease;
}
.wa-float:hover{ transform:translateY(-2px) scale(1.04); }
.wa-float svg{ width:24px; height:24px; fill:currentColor; }
@media (max-width:640px){ .wa-float{ right:16px; bottom:16px; width:48px; height:48px; } }

/* ================= FOOTER ================= */
footer{ margin-top:70px; padding:26px 0 60px; text-align:center; }
.foot-email{
  display:inline-block; font-family:var(--f-display); font-weight:800;
  font-size:clamp(22px, 4vw, 34px); color:var(--ink);
  text-decoration:none; margin-bottom:30px;
  border-bottom:2px solid transparent;
  transition:border-color .2s ease, color .2s ease;
}
.foot-email:hover{ color:var(--accent); border-color:var(--accent); }
footer .foot-links{ display:flex; justify-content:center; gap:16px; margin-bottom:18px; }
footer a{ color:var(--ink-soft); font-size:13px; font-weight:600; }
footer a:hover{ color:var(--ink); }
footer .copy{ font-size:12px; color:var(--ink-faint); }

.foot-icon{
  width:46px; height:46px; border-radius:14px;
  background:linear-gradient(150deg, rgba(255,255,255,.22), rgba(255,255,255,.04));
  color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -4px 8px rgba(0,0,0,.4),
    0 6px 14px rgba(0,0,0,.4);
  transition:transform .15s ease, box-shadow .15s ease;
}
.foot-icon svg{ width:21px; height:21px; fill:currentColor; }
.foot-icon:hover{ transform:translateY(-3px); color:var(--ink); }
.foot-icon.whatsapp{ background:linear-gradient(150deg, #3fdb6a, #1a9e46); color:#fff; }
.foot-icon.instagram{ background:linear-gradient(135deg, #f9ce34, #ee2a7b, #6228d7); color:#fff; }
.foot-icon.tiktok{ background:#0a0a09; color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.15), inset 2px 0 0 #25f4ee, inset -2px 0 0 #fe2c55; }
.foot-icon.whatsapp:hover,
.foot-icon.instagram:hover,
.foot-icon.tiktok:hover{ color:#fff; }