/* =========================================================
   VisioKom — feuille de style de production
   Compilée à partir du design system (tokens + composants)
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Cambo&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap");

:root{
  /* ---- Couleurs de marque ---- */
  --rose-500:#D9789B; --rose-100:#F0DBEC; --navy-700:#263371; --ink-900:#0B0C0C; --grey-100:#EFEFF1;
  --rose-50:#FBF1F6; --rose-200:#EFC3D5; --rose-300:#E7A5BF; --rose-600:#C55C81; --rose-700:#A9456A;
  --navy-50:#EEF0F7; --navy-100:#D6DAEA; --navy-200:#B4BCD8; --navy-300:#8B95C0; --navy-500:#3C4B92;
  --navy-600:#2E3D80; --navy-750:#202B60; --navy-800:#1B2554; --navy-850:#161E45; --navy-900:#121834;
  --n-00:#FFFFFF; --n-05:#F7F7F9; --n-10:#EFEFF1; --n-20:#E2E2E6; --n-30:#CACAD1; --n-40:#A8A8B2;
  --n-50:#7C7C88; --n-60:#575761; --n-70:#3A3A42; --n-80:#212127; --n-90:#0B0C0C;
  --green-500:#2E7D5B; --green-400:#4FBF8B; --green-100:#E2F1EA;
  --amber-500:#B4791B; --amber-100:#FAEFD9; --red-500:#B33A3A; --red-400:#F08A8A; --red-100:#F7E4E4;
  --on-navy-88:rgba(239,239,241,.88); --on-navy-70:rgba(239,239,241,.70); --on-navy-52:rgba(239,239,241,.52);
  --on-navy-22:rgba(239,239,241,.22); --on-navy-12:rgba(239,239,241,.12); --on-navy-06:rgba(239,239,241,.06);

  /* ---- Alias sémantiques (fond clair) ---- */
  --text-strong:var(--ink-900); --text-body:var(--n-70); --text-muted:var(--n-50); --text-subtle:var(--n-40);
  --text-on-dark:var(--grey-100); --text-on-accent:var(--n-00); --text-brand:var(--rose-600); --text-accent:var(--rose-600);
  --text-link:var(--navy-700); --text-link-hover:var(--rose-600); --text-error:var(--red-500); --text-success:var(--green-500);
  --surface-page:var(--n-00); --surface-soft:var(--grey-100); --surface-card:var(--n-00); --surface-raised:var(--n-05);
  --surface-accent-soft:var(--rose-100); --surface-accent-faint:var(--rose-50); --surface-accent:var(--rose-500);
  --wash-faint:rgba(11,12,12,.04); --wash-subtle:var(--grey-100); --wash-strong:var(--n-20);
  --border-hairline:var(--n-20); --border-default:var(--n-30); --border-strong:var(--ink-900); --border-on-dark:var(--on-navy-22);
  --action-primary:var(--navy-700); --action-primary-hover:var(--navy-800); --action-primary-active:var(--navy-900); --action-primary-text:var(--grey-100);
  --action-accent:var(--rose-500); --action-accent-hover:var(--rose-600); --action-accent-active:var(--rose-700);
  --focus-ring:var(--navy-700);
  --shadow-hairline:0 0 0 1px rgba(11,12,12,.07);
  --shadow-1:0 1px 2px rgba(11,12,12,.05), 0 0 0 1px rgba(11,12,12,.05);
  --shadow-2:0 4px 14px rgba(11,12,12,.07), 0 0 0 1px rgba(11,12,12,.045);
  --shadow-3:0 14px 40px rgba(11,12,12,.11), 0 2px 6px rgba(11,12,12,.05);
  --shadow-accent:0 10px 30px rgba(217,120,155,.32);
  --shadow-inset-photo:inset 0 0 0 1px rgba(11,12,12,.06);

  /* ---- Typographie ---- */
  --font-display:"Cambo","Georgia",serif; --font-sans:"Poppins","Helvetica Neue",Arial,sans-serif;
  --t-display-1-size:72px; --t-display-1-lh:1.04; --t-display-1-ls:-1.6px;
  --t-display-2-size:54px; --t-display-2-lh:1.08; --t-display-2-ls:-1.1px;
  --t-display-3-size:40px; --t-display-3-lh:1.14; --t-display-3-ls:-0.7px;
  --t-display-4-size:29px; --t-display-4-lh:1.2;  --t-display-4-ls:-0.4px;
  --t-h1-size:33px; --t-h1-lh:1.22; --t-h1-ls:-0.7px;
  --t-h2-size:25px; --t-h2-lh:1.26; --t-h2-ls:-0.5px;
  --t-h3-size:19px; --t-h3-lh:1.34; --t-h3-ls:-0.3px;
  --t-h4-size:16px; --t-h4-lh:1.4;  --t-h4-ls:-0.1px;
  --t-lead-size:19px; --t-lead-lh:1.6; --t-lead-ls:-0.1px;
  --t-body-size:16px; --t-body-lh:1.7;
  --t-body-sm-size:14px; --t-body-sm-lh:1.65;
  --t-caption-size:13px; --t-caption-lh:1.5;
  --t-eyebrow-size:12px; --t-eyebrow-ls:1.5px;
  --t-button-size:15px; --t-button-ls:0.1px;
  --t-label-size:13px; --t-label-ls:0.1px;
  --t-badge-size:11px; --t-badge-ls:0.7px;
  --t-quote-size:26px; --t-quote-lh:1.45; --t-quote-ls:-0.3px;

  /* ---- Espacement / mise en page ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px;
  --section-y:96px; --gutter:24px; --page-pad:40px; --page-pad-mobile:20px;
  --container:1240px; --container-narrow:760px; --nav-height:76px;

  /* ---- Rayons ---- */
  --r-xs:3px; --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-2xl:32px; --r-full:999px;

  /* ---- Mouvement ---- */
  --ease-out:cubic-bezier(.22,.61,.36,1); --ease-soft:cubic-bezier(.33,1,.68,1);
  --dur-fast:120ms; --dur-base:220ms; --dur-slow:420ms; --dur-reveal:700ms;
}

/* Contexte "navy" — bascule tous les alias en clair-sur-marine. */
.vk-navy{
  --text-strong:var(--grey-100); --text-body:var(--on-navy-88); --text-muted:var(--on-navy-70); --text-subtle:var(--on-navy-52);
  --text-accent:var(--rose-300); --text-link:var(--rose-300); --text-link-hover:var(--n-00);
  --surface-page:var(--navy-700); --surface-soft:var(--navy-800); --surface-card:var(--navy-750); --surface-raised:var(--navy-600);
  --surface-accent-soft:rgba(217,120,155,.16); --surface-accent-faint:rgba(217,120,155,.08);
  --wash-faint:var(--on-navy-06); --wash-subtle:var(--on-navy-12); --wash-strong:var(--on-navy-22);
  --border-hairline:var(--on-navy-12); --border-default:var(--on-navy-22); --border-strong:var(--grey-100);
  --action-primary:var(--grey-100); --action-primary-hover:var(--n-00); --action-primary-text:var(--navy-700);
  --focus-ring:var(--rose-300);
  --shadow-hairline:0 0 0 1px var(--on-navy-12);
  --shadow-2:0 6px 20px rgba(6,9,26,.28), 0 0 0 1px var(--on-navy-06);
  --shadow-3:0 18px 48px rgba(6,9,26,.38), 0 2px 8px rgba(6,9,26,.22);
  --shadow-inset-photo:inset 0 0 0 1px var(--on-navy-12);
}
.vk-navy.vk-deep{ --surface-page:var(--navy-900); }

/* =========================================================
   Base
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-sans);font-size:var(--t-body-size);line-height:var(--t-body-lh);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--text-strong)}
p{margin:0}
img,svg{display:block;max-width:100%}
a{color:var(--text-link);text-decoration:none;transition:color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--text-link-hover)}
button{font:inherit}
[hidden]{display:none !important}
ul{list-style:none;margin:0;padding:0}
::selection{background:var(--rose-100);color:var(--ink-900)}
.vk-navy ::selection{background:var(--rose-500);color:var(--n-00)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--page-pad)}
.container--narrow{max-width:var(--container-narrow)}
@media (max-width:640px){ .container{padding:0 var(--page-pad-mobile)} }

.section{padding:var(--section-y) 0}
.section--soft{background:var(--surface-soft)}
.section--navy{background:var(--navy-700)}
.section--deep{background:var(--navy-900)}
@media (max-width:900px){ .section{padding:64px 0} }

.eyebrow{display:flex;align-items:center;gap:10px;font-size:var(--t-eyebrow-size);font-weight:600;letter-spacing:var(--t-eyebrow-ls);line-height:1.2;text-transform:uppercase;color:var(--text-accent);margin:0}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.6;flex:0 0 auto}

.display-1{font-family:var(--font-display);font-weight:400;font-size:var(--t-display-1-size);line-height:var(--t-display-1-lh);letter-spacing:var(--t-display-1-ls);color:var(--text-strong)}
.display-2{font-family:var(--font-display);font-weight:400;font-size:var(--t-display-2-size);line-height:var(--t-display-2-lh);letter-spacing:var(--t-display-2-ls);color:var(--text-strong)}
.display-3{font-family:var(--font-display);font-weight:400;font-size:var(--t-display-3-size);line-height:var(--t-display-3-lh);letter-spacing:var(--t-display-3-ls);color:var(--text-strong)}
.display-4{font-family:var(--font-display);font-weight:400;font-size:var(--t-display-4-size);line-height:var(--t-display-4-lh);letter-spacing:var(--t-display-4-ls);color:var(--text-strong)}
.lead{font-size:var(--t-lead-size);line-height:var(--t-lead-lh);letter-spacing:var(--t-lead-ls);color:var(--text-muted)}
@media (max-width:640px){
  .display-1{font-size:42px} .display-2{font-size:34px} .display-3{font-size:29px}
}

.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap}
.section-head__copy{display:flex;flex-direction:column;gap:16px;max-width:620px}
@media (max-width:900px){ .section-head{align-items:flex-start} }

/* =========================================================
   Boutons
   ========================================================= */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:46px;padding:0 24px;font-size:var(--t-button-size);font-family:var(--font-sans);font-weight:600;
  letter-spacing:var(--t-button-ls);line-height:1;border-radius:var(--r-full);cursor:pointer;text-decoration:none;
  white-space:nowrap;border:1px solid transparent;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.btn:active{transform:translateY(1px)}
.btn svg{width:18px;height:18px;transition:transform var(--dur-base) var(--ease-out)}
.btn:hover svg.icon-right{transform:translateX(3px)}
.btn--lg{height:56px;padding:0 32px;font-size:16px}
.btn--sm{height:36px;padding:0 16px;font-size:13px}
.btn--full{width:100%}
.btn--primary{background:var(--action-primary);color:var(--action-primary-text);border-color:var(--action-primary)}
.btn--primary:hover{background:var(--action-primary-hover);border-color:var(--action-primary-hover);color:var(--action-primary-text)}
.btn--accent{background:var(--action-accent);color:var(--text-on-accent);border-color:var(--action-accent)}
.btn--accent:hover{background:var(--action-accent-hover);border-color:var(--action-accent-hover);color:var(--text-on-accent);box-shadow:var(--shadow-accent)}
.btn--secondary{background:transparent;color:var(--text-strong);border-color:var(--border-strong)}
.btn--secondary:hover{background:var(--border-strong);color:var(--surface-page)}
.btn--ghost{background:transparent;color:var(--text-strong);border-color:transparent}
.btn--ghost:hover{background:var(--wash-subtle)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn .spinner{width:15px;height:15px;border-radius:999px;border:2px solid currentColor;border-top-color:transparent;animation:vk-spin 620ms linear infinite}

.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;cursor:pointer;
  background:var(--wash-subtle);color:var(--text-strong);border:1px solid transparent;transition:background var(--dur-fast) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.icon-btn:hover{background:var(--wash-strong);transform:translateY(-2px);color:var(--text-strong)}
.icon-btn svg{width:17px;height:17px}

/* =========================================================
   Cartes / badges / tags / divider
   ========================================================= */
.card{border-radius:var(--r-lg);padding:24px;background:var(--surface-card);border:1px solid var(--border-hairline);color:var(--text-body)}
.card--soft{background:var(--surface-soft);border-color:transparent}
.card--pad-28{padding:28px}
.card--pad-40{padding:40px}

.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:var(--t-badge-size);font-weight:600;letter-spacing:var(--t-badge-ls);text-transform:uppercase}
.badge--onphoto{background:rgba(11,12,12,.62);color:var(--grey-100);backdrop-filter:blur(6px)}

.tag{display:inline-flex;align-items:center;height:38px;padding:0 18px;border-radius:999px;cursor:pointer;
  font-size:var(--t-label-size);font-weight:500;letter-spacing:var(--t-label-ls);background:transparent;color:var(--text-body);
  border:1px solid var(--border-hairline);transition:all var(--dur-fast) var(--ease-out)}
.tag:hover{background:var(--wash-subtle);transform:translateY(-1px);color:var(--text-body)}
.tag.is-active{background:var(--navy-700);color:var(--grey-100);border-color:var(--navy-700)}
.tag.is-active:hover{background:var(--navy-700);transform:none;color:var(--grey-100)}

.divider{border:0;height:1px;background:var(--border-hairline);margin:0}
.divider--dark{background:var(--border-on-dark)}

/* =========================================================
   En-tête / navigation
   ========================================================= */
.navbar{position:sticky;top:0;z-index:40;height:var(--nav-height);display:flex;align-items:center;
  background:rgba(255,255,255,.86);backdrop-filter:saturate(150%) blur(16px);border-bottom:1px solid transparent;
  transition:height var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
.navbar.is-scrolled{height:64px;background:rgba(255,255,255,.96);border-bottom-color:var(--n-20);box-shadow:0 6px 22px rgba(11,12,12,.06)}
.navbar__inner{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--page-pad);display:flex;align-items:center;gap:40px}
.navbar__logo{display:flex;flex:0 0 auto}
.navbar__logo img{height:28px;width:auto;transition:height var(--dur-base) var(--ease-out)}
.navbar.is-scrolled .navbar__logo img{height:24px}
.navbar__links{display:flex;align-items:center;gap:6px;margin-left:auto}
.navbar__link{position:relative;padding:8px 4px;margin-right:14px;font-size:var(--t-body-sm-size);font-weight:500;color:var(--text-muted)}
.navbar__link::after{content:"";position:absolute;left:0;bottom:2px;height:1.5px;width:0;border-radius:2px;background:var(--rose-500);transition:width var(--dur-base) var(--ease-soft)}
.navbar__link:hover,.navbar__link.is-active{color:var(--ink-900)}
.navbar__link:hover::after,.navbar__link.is-active::after{width:100%}
.navbar__cta{flex:0 0 auto;display:flex;align-items:center;gap:10px}
.navbar__links-cta{display:none}
.navbar__burger{display:none;flex:0 0 auto;width:40px;height:40px;border-radius:999px;border:1px solid var(--border-hairline);background:transparent;cursor:pointer;align-items:center;justify-content:center}
.navbar__burger svg{width:20px;height:20px}

@media (max-width:900px){
  .navbar__links{position:fixed;top:64px;left:0;right:0;height:calc(100vh - 64px);background:var(--n-00);flex-direction:column;align-items:flex-start;
    padding:24px var(--page-pad-mobile);gap:4px;margin:0;transform:translateX(100%);transition:transform var(--dur-base) var(--ease-out);overflow-y:auto;z-index:39}
  .navbar__links.is-open{transform:translateX(0)}
  .navbar__link{margin-right:0;padding:14px 4px;font-size:17px;width:100%}
  .navbar__burger{display:inline-flex}
  .navbar__cta{display:none}
  .navbar__links-cta{display:inline-flex;margin-top:12px}
}

/* =========================================================
   Pied de page
   ========================================================= */
.footer{background:var(--navy-900);color:var(--on-navy-70);padding:72px 0 32px}
.footer__grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:48px;align-items:start}
.footer__brand{display:flex;flex-direction:column;gap:18px;max-width:330px}
.footer__brand img{height:28px;width:auto}
.footer__tagline{font-size:var(--t-body-sm-size);line-height:1.65;margin:0}
.footer__social{display:flex;gap:10px;margin-top:4px}
.footer__col h4{font-size:var(--t-badge-size);font-weight:600;letter-spacing:var(--t-badge-ls);text-transform:uppercase;color:var(--grey-100);margin:0 0 14px}
.footer__col ul{display:flex;flex-direction:column;gap:10px}
.footer__col a{font-size:var(--t-body-sm-size);color:var(--on-navy-70);display:inline-flex;align-items:center;gap:8px}
.footer__col a:hover{color:var(--grey-100)}
.footer__legal{font-size:var(--t-caption-size);color:var(--on-navy-52);margin:24px 0 0}
@media (max-width:900px){
  .footer__grid{grid-template-columns:1fr 1fr;gap:36px}
  .footer__brand{grid-column:1 / -1;max-width:none}
}
@media (max-width:560px){ .footer__grid{grid-template-columns:1fr} }

/* =========================================================
   Héro
   ========================================================= */
.hero{padding:0;background:var(--n-00);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;top:-200px;right:-180px;width:640px;height:640px;border-radius:999px;pointer-events:none;
  background:radial-gradient(circle, rgba(217,120,155,.16), transparent 70%)}
.hero__inner{position:relative;padding-top:64px;display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.hero__copy{display:flex;flex-direction:column;gap:26px}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.hero__stats{display:flex;margin-top:18px;flex-wrap:wrap}
.hero__stat{padding:0 26px 0 0}
.hero__stat + .hero__stat{padding:0 26px;border-left:1px solid var(--border-hairline)}
.hero__gallery{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hero__gallery .is-wide{grid-column:1 / -1;aspect-ratio:16/10;position:relative}
.hero__gallery figure{margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-2)}
.hero__gallery .is-wide figure{aspect-ratio:16/10}
.hero__gallery figure:not(.is-wide-fig){aspect-ratio:4/3;box-shadow:var(--shadow-1)}
.hero__gallery img{width:100%;height:100%;object-fit:cover}
.hero__gallery .badge-wrap{position:absolute;left:16px;bottom:16px}
.hero__ribbon{margin-top:76px;border-top:1px solid var(--border-hairline);border-bottom:1px solid var(--border-hairline);padding:20px 0}

.stat-block{display:flex;flex-direction:column;gap:6px}
.stat-block__value{font-family:var(--font-display);font-size:var(--t-display-2-size);font-weight:400;line-height:var(--t-display-2-lh);letter-spacing:var(--t-display-2-ls);color:var(--text-strong)}
.stat-block__label{font-size:var(--t-caption-size);font-weight:500;text-transform:uppercase;letter-spacing:1.1px;color:var(--text-muted)}

.marquee{overflow:hidden;position:relative;width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;width:max-content;animation:vk-marquee 46s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__group{display:flex;align-items:center;gap:48px;padding-right:48px;flex:0 0 auto}
.marquee__item{display:flex;align-items:center;gap:48px;font-size:var(--t-caption-size);font-weight:500;letter-spacing:.7px;text-transform:uppercase;color:var(--text-subtle);white-space:nowrap}
.marquee__item::after{content:"";width:3px;height:3px;border-radius:999px;background:var(--rose-500)}

@media (max-width:900px){
  .hero__inner{grid-template-columns:1fr;gap:40px}
  .hero__gallery{order:-1}
}
@media (max-width:560px){
  .hero__gallery{grid-template-columns:1fr}
  .hero__gallery .is-wide{grid-column:auto}
  .hero__stats{gap:0}
}

/* =========================================================
   Cartes de service
   ========================================================= */
.services-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.service-card{grid-column:span 3;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:18px;padding:30px;
  border-radius:var(--r-lg);background:var(--surface-card);border:1px solid var(--border-hairline);color:var(--text-muted);
  height:100%;transition:border-color var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.service-card.is-span-2{grid-column:span 2}
.service-card::before{content:"";position:absolute;top:0;left:0;height:2px;background:var(--rose-500);width:0%;transition:width var(--dur-slow) var(--ease-soft)}
.service-card:hover{border-color:var(--border-default);transform:translateY(-4px);box-shadow:var(--shadow-3)}
.service-card:hover::before{width:100%}
.service-card__icon{width:52px;height:52px;border-radius:999px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  background:var(--wash-subtle);color:var(--text-strong);transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-soft)}
.service-card__icon svg{width:24px;height:24px}
.service-card:hover .service-card__icon{background:var(--rose-500);color:#fff;transform:rotate(-6deg) scale(1.06)}
.service-card h3{font-family:var(--font-display);font-size:var(--t-display-4-size);font-weight:400;line-height:var(--t-display-4-lh);letter-spacing:var(--t-display-4-ls)}
.service-card p{font-size:var(--t-body-sm-size);line-height:var(--t-body-sm-lh);color:var(--text-muted)}
.service-card ul{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:18px;border-top:1px solid var(--border-hairline)}
.service-card li{display:flex;align-items:center;gap:10px;font-size:var(--t-body-sm-size);color:var(--text-body)}
.service-card li::before{content:"";width:4px;height:4px;border-radius:999px;background:var(--rose-500);flex:0 0 auto}
@media (max-width:900px){
  .services-grid{grid-template-columns:1fr 1fr}
  .service-card,.service-card.is-span-2{grid-column:span 1}
}
@media (max-width:560px){
  .services-grid{grid-template-columns:1fr}
}

/* =========================================================
   Réalisations / filtres / cartes projet
   ========================================================= */
.filter-tabs{display:flex;flex-wrap:wrap;gap:8px}
.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.project-card{display:flex;flex-direction:column;gap:14px;cursor:pointer}
.project-card.is-wide{grid-column:span 2}
.project-card__frame{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;background:var(--surface-soft);box-shadow:var(--shadow-inset-photo);transition:box-shadow var(--dur-base) var(--ease-out)}
.project-card.is-wide .project-card__frame{aspect-ratio:16/9}
.project-card__frame img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-soft)}
.project-card:hover .project-card__frame{box-shadow:var(--shadow-3)}
.project-card:hover img{transform:scale(1.06)}
.project-card__scrim{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(6,9,26,.72));opacity:0;transition:opacity var(--dur-base) var(--ease-out)}
.project-card:hover .project-card__scrim{opacity:1}
.project-card__badge{position:absolute;top:14px;left:14px;transition:transform var(--dur-base) var(--ease-out)}
.project-card:hover .project-card__badge{transform:translateY(-4px)}
.project-card__cta{position:absolute;left:16px;bottom:16px;display:flex;align-items:center;gap:8px;font-size:var(--t-label-size);font-weight:600;color:var(--grey-100);opacity:0;transform:translateY(8px);transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.project-card:hover .project-card__cta{opacity:1;transform:none}
.project-card__cta::after{content:"";display:inline-block;width:18px;height:1px;background:var(--rose-500)}
.project-card h3{font-size:var(--t-h4-size);font-weight:600;letter-spacing:var(--t-h4-ls);line-height:var(--t-h4-lh);transition:color var(--dur-fast) var(--ease-out)}
.project-card:hover h3{color:var(--text-accent)}
.project-card p{font-size:var(--t-body-sm-size);color:var(--text-muted);margin-top:4px}
@media (max-width:900px){
  .projects-grid{grid-template-columns:1fr 1fr}
  .project-card.is-wide{grid-column:span 2}
}
@media (max-width:560px){
  .projects-grid{grid-template-columns:1fr}
  .project-card.is-wide{grid-column:span 1}
}

/* =========================================================
   Méthode
   ========================================================= */
.methode-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:72px}
.methode-badges{display:flex;flex-wrap:wrap;gap:18px;margin-top:2px}
.methode-badge{display:flex;align-items:center;gap:10px;font-size:var(--t-body-sm-size);color:var(--text-strong)}
.methode-badge svg{width:18px;height:18px;color:var(--rose-300)}
.step-row{display:grid;grid-template-columns:78px 1fr;gap:24px;padding:26px 20px 26px 0;border-top:1px solid var(--border-hairline);transition:background var(--dur-base) var(--ease-out);border-radius:var(--r-sm)}
.step-row:first-child{border-top:none}
.step-row:hover{background:linear-gradient(90deg,var(--surface-accent-faint),transparent 70%)}
.step-row__n{font-family:var(--font-display);font-size:32px;line-height:1;color:var(--text-subtle);transition:color var(--dur-base) var(--ease-out)}
.step-row:hover .step-row__n{color:var(--rose-300)}
.step-row h3{font-size:var(--t-h3-size);font-weight:600;letter-spacing:var(--t-h3-ls)}
.step-row p{font-size:var(--t-body-size);line-height:var(--t-body-lh);color:var(--text-muted);margin-top:6px}
@media (max-width:900px){ .methode-grid{grid-template-columns:1fr} }

/* =========================================================
   Preuve sociale
   ========================================================= */
.proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.testimonial{display:flex;flex-direction:column;gap:22px}
.testimonial__mark{font-family:var(--font-display);font-size:60px;line-height:.6;color:var(--text-accent)}
.testimonial blockquote{font-family:var(--font-display);font-size:var(--t-quote-size);font-weight:400;line-height:var(--t-quote-lh);letter-spacing:var(--t-quote-ls);color:var(--text-strong);margin:0}
.testimonial figcaption{display:flex;flex-direction:column;gap:2px}
.testimonial figcaption span:first-child{font-size:var(--t-label-size);font-weight:600;color:var(--text-strong)}
.testimonial figcaption span:last-child{font-size:var(--t-caption-size);color:var(--text-muted)}
.proof-stats{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding-bottom:36px}
.proof-zone{font-size:var(--t-body-sm-size);color:var(--text-muted);margin-top:24px}
@media (max-width:900px){ .proof-grid{grid-template-columns:1fr;gap:48px} }
@media (max-width:560px){ .proof-stats{grid-template-columns:1fr 1fr} }

/* =========================================================
   Devis / formulaire
   ========================================================= */
.devis-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;align-items:start}
.devis-contact{display:flex;flex-direction:column;gap:14px}
.devis-contact a,.devis-contact div{display:flex;align-items:center;gap:12px;font-size:var(--t-body-sm-size);color:var(--text-body)}
.devis-contact svg{width:17px;height:17px;color:var(--rose-300)}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:var(--t-label-size);font-weight:500;letter-spacing:var(--t-label-ls);color:var(--text-strong)}
.field label .req{color:var(--rose-600)}
.field .hint{font-size:var(--t-caption-size);color:var(--text-muted)}
.field .error{font-size:var(--t-caption-size);color:var(--text-error)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.input,.textarea,.select{width:100%;min-height:52px;padding:14px 16px;font-family:var(--font-sans);font-size:var(--t-body-size);
  color:var(--text-strong);background:var(--surface-page);border-radius:var(--r-md);outline:none;border:1px solid var(--border-default);
  transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.input:focus,.textarea:focus,.select:focus{border-color:var(--rose-500);box-shadow:0 0 0 3px var(--surface-accent-soft)}
.input.is-invalid,.textarea.is-invalid{border-color:var(--text-error)}
.textarea{resize:vertical;line-height:var(--t-body-lh)}
.select-wrap{position:relative}
.select{appearance:none;padding-right:44px;cursor:pointer}
.select-wrap::after{content:"";position:absolute;right:18px;top:50%;margin-top:-6px;pointer-events:none;width:8px;height:8px;
  border-right:1.5px solid var(--text-muted);border-bottom:1.5px solid var(--text-muted);transform:rotate(45deg)}
.checkbox{display:flex;align-items:flex-start;gap:12px;cursor:pointer;font-size:var(--t-body-sm-size);color:var(--text-muted);line-height:1.55}
.checkbox input{position:absolute;opacity:0;width:0;height:0}
.checkbox__box{width:20px;height:20px;flex:0 0 auto;margin-top:2px;border-radius:var(--r-xs);border:1px solid var(--border-default);
  display:flex;align-items:center;justify-content:center;transition:all var(--dur-fast) var(--ease-out)}
.checkbox:hover .checkbox__box{border-color:var(--border-strong)}
.checkbox input:checked ~ .checkbox__box{background:var(--rose-500);border-color:var(--rose-500)}
.checkbox__box svg{width:11px;height:9px;display:none;color:#fff}
.checkbox input:checked ~ .checkbox__box svg{display:block}
.devis-card{box-shadow:var(--shadow-2);border:1px solid var(--n-20)}
.devis-success{display:flex;flex-direction:column;gap:16px;align-items:flex-start;padding:24px 0}
.devis-success__icon{width:52px;height:52px;border-radius:999px;background:var(--green-100);color:var(--green-500);display:grid;place-items:center}
.devis-success__icon svg{width:24px;height:24px}
@media (max-width:900px){ .devis-grid{grid-template-columns:1fr} }
@media (max-width:560px){ .field-row{grid-template-columns:1fr} }

/* =========================================================
   FAQ
   ========================================================= */
.faq-item{border-bottom:1px solid var(--border-hairline)}
.faq-item__q{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;padding:22px 0;
  background:transparent;border:0;cursor:pointer;text-align:left;color:var(--text-strong);font-family:var(--font-sans);
  font-size:var(--t-h3-size);font-weight:600;letter-spacing:var(--t-h3-ls);transition:color var(--dur-fast) var(--ease-out)}
.faq-item__q:hover{color:var(--text-accent)}
.faq-item.is-open .faq-item__q{color:var(--text-accent)}
.faq-item__icon{width:30px;height:30px;flex:0 0 auto;border-radius:999px;background:var(--wash-subtle);color:var(--text-strong);
  display:grid;place-items:center;position:relative;transition:background var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-soft)}
.faq-item.is-open .faq-item__icon{background:var(--rose-500);color:#fff;transform:rotate(135deg)}
.faq-item__icon span{position:absolute;background:currentColor;border-radius:2px}
.faq-item__icon span:first-child{width:11px;height:1.5px}
.faq-item__icon span:last-child{width:1.5px;height:11px}
.faq-item__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out);opacity:0}
.faq-item.is-open .faq-item__a{grid-template-rows:1fr;opacity:1}
.faq-item__a > div{overflow:hidden}
.faq-item__a p{padding:0 40px 24px 0;font-size:var(--t-body-size);line-height:var(--t-body-lh);color:var(--text-body)}
@media (max-width:640px){ .faq-item__a p{padding-right:0} }

/* =========================================================
   Utilitaires d'apparition au scroll
   ========================================================= */
.vk-reveal{opacity:0;transform:translateY(22px);transition:opacity var(--dur-reveal) var(--ease-soft),transform var(--dur-reveal) var(--ease-soft)}
.vk-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.vk-reveal{opacity:1;transform:none}}

@keyframes vk-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes vk-spin{to{transform:rotate(360deg)}}

/* =========================================================
   Page réalisation (détail)
   ========================================================= */
.crumb-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:34px;background:transparent;border:0;padding:0;cursor:pointer;
  font-family:var(--font-sans);font-size:var(--t-body-sm-size);font-weight:500;color:var(--text-muted)}
.crumb-back svg{width:16px;height:16px}
.crumb-back:hover{color:var(--text-strong)}
.detail-head{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:end}
.detail-head__client{font-size:var(--t-body-sm-size);color:var(--text-muted);padding-bottom:6px}
.detail-hero{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/9;box-shadow:var(--shadow-2);margin-top:40px}
.detail-hero img{width:100%;height:100%;object-fit:cover}
.detail-body{display:grid;grid-template-columns:1.15fr .85fr;gap:72px;align-items:start;padding:80px 0}
.spec-title{font-size:var(--t-badge-size);font-weight:600;letter-spacing:var(--t-badge-ls);text-transform:uppercase;color:var(--text-accent);margin:0 0 6px}
.spec-row{display:grid;grid-template-columns:1fr 1.25fr;gap:16px;padding:13px 0;border-top:1px solid var(--border-hairline)}
.spec-row:first-of-type{border-top:none}
.spec-row dt{font-size:var(--t-caption-size);color:var(--text-muted)}
.spec-row dd{font-size:var(--t-caption-size);font-weight:500;color:var(--text-strong);margin:0}
.deroule-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:72px}
.deroule-step{display:grid;grid-template-columns:62px 1fr;gap:24px;padding:24px 0;border-top:1px solid var(--border-hairline)}
.deroule-step:first-child{border-top:none}
.deroule-step__n{font-family:var(--font-display);font-size:26px;line-height:1.2;color:var(--text-accent)}
.deroule-step h3{font-size:var(--t-h3-size);font-weight:600;letter-spacing:var(--t-h3-ls)}
.deroule-step p{font-size:var(--t-body-size);line-height:var(--t-body-lh);color:var(--text-muted);margin-top:6px}
.gallery-grid{display:grid;gap:20px}
.gallery-grid.cols-2{grid-template-columns:1fr 1fr}
.gallery-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.gallery-grid figure{margin:0;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow-inset-photo)}
.gallery-grid img{width:100%;height:100%;object-fit:cover}
.detail-next{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding-top:44px}
.detail-next__cta{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.detail-next__cta p{font-size:var(--t-body-sm-size);line-height:var(--t-body-sm-lh);color:var(--text-muted);max-width:380px}
.detail-next__card{display:flex;align-items:center;gap:20px;padding:18px;background:transparent;border:1px solid var(--border-hairline);
  border-radius:var(--r-lg);cursor:pointer;text-align:left;color:inherit}
.detail-next__card:hover{border-color:var(--border-default)}
.detail-next__thumb{width:96px;height:72px;border-radius:var(--r-md);overflow:hidden;flex:0 0 auto}
.detail-next__thumb img{width:100%;height:100%;object-fit:cover}
.detail-next__label{font-size:var(--t-badge-size);font-weight:600;letter-spacing:var(--t-badge-ls);text-transform:uppercase;color:var(--text-accent)}
.detail-next__title{font-family:var(--font-sans);font-size:var(--t-h4-size);font-weight:600;color:var(--text-strong)}
.detail-next__arrow{margin-left:auto;color:var(--text-muted);display:flex}
.detail-next__arrow svg{width:18px;height:18px}
@media (max-width:900px){
  .detail-head,.detail-body,.deroule-grid{grid-template-columns:1fr;gap:32px}
  .detail-next{grid-template-columns:1fr;gap:28px}
  .gallery-grid.cols-3{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){ .gallery-grid.cols-2,.gallery-grid.cols-3{grid-template-columns:1fr} }

/* =========================================================
   Mentions légales (page simple)
   ========================================================= */
.legal h2{font-size:var(--t-h2-size);margin:40px 0 12px}
.legal p{margin-bottom:14px;color:var(--text-body);line-height:var(--t-body-lh)}