/* Polices auto-hébergées, sous-ensemble latin.
   Servies depuis le site plutôt que depuis Google Fonts, pour qu'aucune
   adresse IP de visiteur ne parte chez un tiers. font-display:swap affiche
   immédiatement le texte dans une police de secours, le temps du chargement. */
@font-face{font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/inter-500.woff2') format('woff2');}
@font-face{font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/inter-600.woff2') format('woff2');}
@font-face{font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/inter-700.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/space-grotesk-500.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/space-grotesk-700.woff2') format('woff2');}

:root{
  --black:#0A0A0A;
  --white:#FFFFFF;
  --gray-50:#F5F5F5;
  --gray-100:#EDEDED;
  --gray-200:#E5E5E5;
  --gray-400:#A0A0A5;
  --gray-500:#6E6E73;
  --accent:#288760;
  --accent-2:#4B2E83;
  --accent-dark:#1A5140;
  --accent-tint:#E7F5EA;
  --accent-light:#B7E5BA;
  --accent-mid:#5CA87C;
  --radius:10px;
  --radius-sm:6px;
  --ease:cubic-bezier(.16,1,.3,1);
  --container:1240px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--white);
  color:var(--black);
  font-family:'Inter', sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  opacity:0.05;
  mix-blend-mode:overlay;
  background-repeat:repeat;
  background-size:180px 180px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:inherit; text-decoration:none;}
::selection{background:var(--accent); color:#fff;}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}

.wrap{max-width:var(--container); margin:0 auto; padding:0 40px;}

h1,h2,h3,h4{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.05;
  color:var(--black);
  text-wrap:balance;
}

p{color:var(--gray-500); text-wrap:pretty;}

.eyebrow{
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--accent);
}

/* ---------- REVEAL (scroll animation) ---------- */
.reveal{
  opacity:1;
  transform:none;
  transition:opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.reveal-pending{
  opacity:0;
  transform:translateY(24px);
}
.reveal.is-visible{opacity:1; transform:translateY(0);}
.reveal-stagger > *{transition-delay:calc(var(--i, 0) * 90ms);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important; transform:none !important; transition:none;}
}

/* ---------- HEADER ---------- */
header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  padding:20px 24px 0;
}
nav{
  max-width:var(--container);
  width:calc(100% - 48px);
  margin:0 auto;
  padding:16px 16px 16px 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(10,10,10,0.06);
  border-radius:28px;
  box-shadow:0 12px 32px rgba(10,10,10,0.08);
  transition:box-shadow 0.3s var(--ease);
}
header.scrolled nav{
  box-shadow:0 16px 40px rgba(10,10,10,0.12);
  background:rgba(255,255,255,0.88);
}
.logo{
  font-family:'Space Grotesk', sans-serif;
  font-size:19px;
  font-weight:700;
}
.logo a{display:flex; align-items:center;}
.logo-mark{height:34px; width:auto; display:block;}
.nav-links{display:flex; align-items:center; gap:38px; font-size:14px;}
.nav-links a{color:var(--gray-500); transition:color 0.2s; position:relative;}
.nav-links a::after{
  content:'';
  position:absolute; left:0; right:0; bottom:-4px;
  height:1px; background:var(--black);
  transform:scaleX(0); transform-origin:left;
  transition:transform 0.25s var(--ease);
}
.nav-links a:hover{color:var(--black);}
.nav-links a:hover::after, .nav-links a.active::after{transform:scaleX(1);}
.nav-links a.active{color:var(--black); font-weight:500;}
.nav-cta{
  font-size:13.5px;
  font-weight:600;
  padding:11px 22px;
  background:var(--black);
  color:#fff !important;
  border-radius:999px;
  transition:background 0.2s;
}
.nav-cta::after{display:none;}
.nav-cta:hover{background:var(--accent);}
.burger{display:none; background:none; border:none; color:var(--black); font-size:20px; cursor:pointer;}

/* ---------- BUTTONS ---------- */
.btn-primary{
  background:var(--black);
  color:#fff;
  padding:15px 30px;
  font-size:14px;
  font-weight:600;
  border-radius:999px;
  display:inline-block;
  transition:background 0.2s, transform 0.2s;
}
.btn-primary:hover{background:var(--accent); transform:translateY(-1px);}
.btn-ghost{
  border:1px solid var(--black);
  color:var(--black);
  padding:14px 28px;
  font-size:14px;
  font-weight:600;
  border-radius:999px;
  background:#fff;
  transition:border-color 0.2s, background 0.2s, color 0.2s;
}
.btn-ghost:hover{background:var(--accent-tint); border-color:var(--accent-tint); color:var(--black);}

/* ---------- HERO ---------- */
.hero-white{padding:158px 0 60px;}
.hero-actions{display:flex; gap:16px; margin-top:44px; flex-wrap:wrap;}
.hero-btn-ghost{background:transparent; border-color:rgba(255,255,255,0.6); color:#fff;}
.hero-btn-ghost:hover{background:#fff; color:var(--black); border-color:#fff;}

/* Fond vert quadrillé continu derrière le hero, jusqu'à la section Services */
.jade-zone{
  position:relative;
  overflow:hidden;
  border-radius:0 0 40px 40px;
  clip-path:inset(0 round 0 0 40px 40px);
  background:radial-gradient(120% 65% at 30% 0%, var(--accent-light) 0%, var(--accent-mid) 20%, var(--accent) 45%, var(--accent-dark) 100%);
}
.jade-zone::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.09) 0, rgba(255,255,255,0.09) 1px, transparent 1px, transparent 64px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.09) 0, rgba(255,255,255,0.09) 1px, transparent 1px, transparent 64px);
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 80px), transparent 100%);
  mask-image:linear-gradient(to bottom, #000 calc(100% - 80px), transparent 100%);
}
.jade-zone .services-jade{background:none; padding-top:40px;}

.hero-d-card{
  position:relative;
  overflow:hidden;
  border-radius:40px;
  border:1px solid var(--accent-tint);
  box-shadow:0 32px 70px rgba(8,28,19,0.35);
  background:var(--white);
  padding:72px 64px;
  min-height:620px;
  display:flex;
  align-items:center;
}
.hero-d-card::before, .about-hero-card::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:40px;
  pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(40,135,96,0.08) 0, rgba(40,135,96,0.08) 1px, transparent 1px, transparent 56px),
    repeating-linear-gradient(90deg, rgba(40,135,96,0.08) 0, rgba(40,135,96,0.08) 1px, transparent 1px, transparent 56px);
}
.hero-d-content{max-width:600px;}
.hero-d-card .hero-actions{align-items:center;}
.hero-d-title{
  font-weight:700;
  letter-spacing:-0.03em;
  font-size:clamp(32px,4.8vw,68px);
  line-height:1.15;
  color:var(--accent-dark);
  margin-top:18px;
}
.hero-d-title .out{
  -webkit-text-stroke:1.3px var(--accent);
  color:transparent;
}
.hero-d-sub{max-width:440px; margin-top:26px; font-size:16.5px; color:var(--gray-500); line-height:1.6;}
.hero-d-showcase{
  position:absolute;
  top:105px; right:160px;
  width:410px; height:410px;
  z-index:2;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--gray-200);
  box-shadow:0 24px 54px rgba(20,60,40,0.18);
}
.hero-d-showcase-img{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  opacity:0;
  transition:opacity 0.9s var(--ease);
}
.hero-d-showcase-img.active{opacity:1;}
.hero-d-badge{
  position:absolute; z-index:3;
  right:48px; bottom:40px;
  width:104px; height:104px;
}
.hero-d-badge .ring{width:100%; height:100%; animation:hero-d-spin 14s linear infinite;}
@keyframes hero-d-spin{from{transform:rotate(0);} to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){.hero-d-badge .ring{animation:none;}}
.hero-d-badge .core{
  position:absolute; inset:26%;
  background:var(--accent);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
}
.hero-d-badge .core svg{width:18px; height:18px;}
@media (max-width:900px){
  .hero-d-card{padding:48px 32px; min-height:auto; flex-direction:column; align-items:flex-start;}
  .hero-d-showcase{display:none;}
  .hero-d-card .hero-actions{justify-content:space-between; width:100%;}
  .hero-d-badge{position:relative; right:auto; bottom:auto; margin-top:0; flex:none; width:100px; height:100px;}
  .hero-white{padding:128px 0 32px;}
  .jade-zone .services-jade{padding-top:16px; padding-bottom:48px;}
}

/* ---------- SECTION GENERIC ---------- */
section{padding:140px 0;}
.section-head{max-width:680px; margin-bottom:64px;}
.section-head h2{font-size:clamp(32px,4vw,52px); margin-top:14px;}
.divider{border:none; border-top:1px solid var(--gray-200);}
.bg-gray{background:var(--white);}

/* ---------- SERVICES : JADE HORIZON ---------- */
.services-jade{
  position:relative;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.09) 0, rgba(255,255,255,0.09) 1px, transparent 1px, transparent 64px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.09) 0, rgba(255,255,255,0.09) 1px, transparent 1px, transparent 64px),
    radial-gradient(120% 90% at 30% 0%, var(--accent-light) 0%, var(--accent-mid) 30%, var(--accent) 62%, var(--accent-dark) 100%);
  overflow:hidden;
}
.services-jade .eyebrow{color:rgba(255,255,255,0.75);}
.services-jade .section-head h2{color:#fff;}
.services-jade .section-head{max-width:680px;}
.service-card-violet{
  background:rgba(255,255,255,0.12) !important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.32);
  border-radius:0 !important;
  aspect-ratio:auto !important;
  height:220px !important;
  display:flex;
  align-items:center;
  transition:border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.service-card-violet:hover{transform:none; box-shadow:none; border-color:rgba(255,255,255,0.55); background:rgba(255,255,255,0.18) !important;}
.service-card-violet::before{display:none;}
.service-card-violet .service-card-bottom{
  position:static;
  width:100%;
  padding:26px;
  display:block;
}
.service-card-number{
  display:block;
  font-family:'Space Grotesk', sans-serif;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0.08em;
  color:rgba(255,255,255,0.65);
  margin-bottom:10px;
}
.service-card-violet .service-card-bottom h3{color:#fff; font-size:19px;}
.service-card-violet .service-card-bottom p{color:rgba(255,255,255,0.82); margin-top:10px; font-size:14px; line-height:1.55;}

/* ---------- ABOUT ---------- */
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start;}
.about-lead{font-size:24px; font-family:'Space Grotesk', sans-serif; font-weight:500; color:var(--black); line-height:1.35;}
.about-lead .accent{
  background:linear-gradient(100deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.about-points{margin-top:8px;}
.about-point{padding:24px 0; border-top:1px solid var(--gray-200);}
.about-point:last-child{border-bottom:1px solid var(--gray-200);}
.about-point h4{font-size:17px; margin-bottom:8px;}
.about-point p{font-size:14.5px;}
.about-point p + p{margin-top:12px;}
.about-point.engagement-highlight{
  border-top:none;
  background:linear-gradient(160deg, rgba(183,229,186,0.4), rgba(231,245,234,0.65));
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(40,135,96,0.22);
  border-radius:24px;
  padding:26px 28px;
}

/* ---------- ENGAGEMENT ---------- */
.engagement-section{padding:72px 0;}
.engagement-section .section-head{text-align:center; margin-left:auto; margin-right:auto; margin-bottom:0;}
.engagement-cards{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  flex-wrap:wrap;
  max-width:800px;
  margin:40px auto 0;
}
.engagement-card{
  width:360px;
  max-width:100%;
  padding:34px 32px;
  border-radius:26px;
  box-shadow:0 24px 50px rgba(20,60,40,0.16);
  position:relative;
}
.engagement-card h4{font-size:19px; margin-bottom:10px;}
.engagement-card p{font-size:14.5px;}
.engagement-card-ponctuel{
  background:var(--accent);
  color:#fff;
  transform:rotate(-4deg);
  margin-right:-36px;
  z-index:1;
}
.engagement-card-ponctuel h4{color:#fff;}
.engagement-card-ponctuel p{color:rgba(255,255,255,0.85);}
.engagement-card-recurrent{
  background:var(--accent-tint);
  border:1px solid rgba(40,135,96,0.2);
  color:var(--black);
  transform:rotate(3deg) translateY(28px);
  z-index:2;
}
.engagement-card-recurrent .eyebrow{color:var(--accent-dark); margin-bottom:8px;}
@media (max-width:700px){
  .engagement-card-ponctuel, .engagement-card-recurrent{transform:none; margin:0 0 24px;}
}

/* La page À propos enchaîne deux sections sur fond blanc avec le padding
   par défaut de 140px, soit 280px de vide entre les deux : resserré ici,
   sans toucher au rythme des autres pages. */
.page-about section:not(.about-hero-white){padding:88px 0;}
.page-about .section-head{margin-bottom:44px;}

.about-hero-white{padding:158px 0 70px;}
.about-hero-card{
  position:relative;
  overflow:hidden;
  border-radius:40px;
  border:1px solid var(--accent-tint);
  box-shadow:0 32px 70px rgba(8,28,19,0.35);
  background:var(--white);
  padding:64px;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:56px;
  align-items:center;
  min-height:420px;
}
.about-hero-photo{
  position:relative;
  border-radius:24px;
  aspect-ratio:4/5;
  overflow:hidden;
  background:linear-gradient(160deg, var(--gray-100), var(--gray-200));
}
.about-hero-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
@media (max-width:900px){
  .about-hero-card{grid-template-columns:1fr; padding:40px 28px; min-height:auto;}
  /* En colonne unique, le portrait passe devant : on ouvre sur le visage, pas sur
     trois paragraphes. L'ordre du HTML reste celui du bureau, texte puis photo. */
  .about-hero-photo{aspect-ratio:4/5; order:-1;}
}

/* ---------- SERVICES ---------- */
.service-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
.service-card{
  position:relative;
  aspect-ratio:4/3;
  border-radius:24px;
  overflow:hidden;
  background-size:cover;
  background-position:center;
  background-color:var(--gray-100);
  transition:transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.service-card:hover{transform:translateY(-6px); box-shadow:0 22px 44px rgba(10,10,10,0.16);}
.service-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 35%, rgba(10,10,10,0.8) 100%);
}
.service-card-tag{
  position:absolute;
  top:18px; right:18px;
  z-index:2;
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:10px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.7);
  border:1px dashed rgba(255,255,255,0.4);
  padding:5px 10px;
  border-radius:999px;
}
.service-card-bottom{
  position:absolute;
  left:22px; right:22px; bottom:22px;
  z-index:2;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}
.service-card-bottom h3{color:#fff; font-size:19px; margin:0;}
.service-card-bottom p{color:rgba(255,255,255,0.72); font-size:13px; margin-top:4px;}
.service-card-plus{
  width:38px; height:38px;
  min-width:38px;
  border-radius:50%;
  background:rgba(255,255,255,0.15);
  border:1px solid rgba(255,255,255,0.45);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:19px;
  line-height:1;
}
@media (max-width:900px){
  .service-grid{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:600px){
  .service-grid{grid-template-columns:repeat(2, 1fr); gap:12px;}
  .service-card-violet{height:248px !important;}
  .service-card-violet .service-card-bottom{padding:18px;}
  .service-card-violet .service-card-bottom h3{font-size:16px;}
  .service-card-violet .service-card-bottom p{font-size:12.5px;}
}

/* ---------- PRICING ---------- */
.pricing-box{
  background:#fff;
  border:1px solid var(--gray-200);
  border-radius:var(--radius);
  padding:48px;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:40px;
  align-items:center;
}
.pricing-box h3{font-size:22px; margin-bottom:12px;}
.price-tag{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:34px;
  color:var(--black);
}
.price-tag small{
  font-size:14px;
  color:var(--gray-500);
  font-family:'Inter', sans-serif;
  font-weight:400;
}
.price-list{list-style:none; font-size:14px; margin-top:20px;}
.price-list li{
  padding:8px 0;
  border-top:1px solid var(--gray-200);
  display:flex;
  justify-content:space-between;
}
@media (max-width:760px){
  .pricing-box{grid-template-columns:1fr; padding:32px;}
}

/* ---------- PROCESS ---------- */
.process-list{border-top:1px solid var(--gray-200);}
.process-row{
  display:grid;
  grid-template-columns:80px 260px 1fr;
  gap:32px;
  align-items:center;
  padding:32px 0;
  border-bottom:1px solid var(--gray-200);
}
.process-row .step-num{font-family:'Space Grotesk', sans-serif; font-size:22px; color:var(--gray-400);}
.process-row h4{font-size:19px;}
.process-row p{font-size:14.5px;}
@media (max-width:760px){
  .process-row{grid-template-columns:1fr; gap:8px;}
}

/* ---------- PROTOTYPAGE 3D : CARTE SAGE ---------- */
.proto-sage{
  position:relative;
  background:
    repeating-linear-gradient(0deg, rgba(10,10,10,0.05) 0, rgba(10,10,10,0.05) 1px, transparent 1px, transparent 64px),
    repeating-linear-gradient(90deg, rgba(10,10,10,0.05) 0, rgba(10,10,10,0.05) 1px, transparent 1px, transparent 64px),
    var(--accent-tint);
  overflow:hidden;
}
.proto-grid{
  display:grid;
  grid-template-columns:1fr 0.85fr;
  gap:72px;
  align-items:center;
}
.proto-process{margin-top:40px; display:flex; flex-direction:column; gap:16px; border-top:none;}
.proto-process .process-row{
  display:grid;
  grid-template-columns:56px 1fr;
  column-gap:20px;
  row-gap:0;
  align-items:start;
  padding:26px 28px;
  border-bottom:none;
  background:rgba(255,255,255,0.42);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,0.65);
  border-radius:0;
  box-shadow:0 10px 28px rgba(20,60,40,0.08);
  transition:background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.proto-process .process-row:hover{background:rgba(255,255,255,0.62); border-color:rgba(255,255,255,0.9); transform:translateY(-2px);}
.proto-process .step-num{grid-row:1 / 3; font-family:'Space Grotesk', sans-serif; font-size:24px; font-weight:600; color:var(--accent);}
.proto-process h4{grid-column:2; font-size:18px;}
.proto-process p{grid-column:2; margin-top:6px; font-size:14px;}
@media (max-width:760px){
  .proto-process .process-row{grid-template-columns:1fr; gap:6px;}
  .proto-process .step-num{grid-row:auto;}
}
.proto-card{
  background:#fff;
  border-radius:24px;
  padding:24px;
  box-shadow:0 24px 60px rgba(20,60,40,0.14);
}
.proto-card-visual{
  position:relative;
  border-radius:16px;
  /* calé sur le ratio de parfum-fictif-sketches.jpg (1000x574) :
     en 4/3 l'image en "contain" laissait de larges bandes blanches */
  aspect-ratio:1000/574;
  background:linear-gradient(160deg, var(--gray-100), var(--gray-200));
  margin-bottom:18px;
}
.proto-card-title{font-size:22px; margin-bottom:10px;}
.proto-card-desc{font-size:14.5px; margin-bottom:20px;}
.proto-card-cta{width:100%; text-align:center;}
@media (max-width:900px){
  .proto-grid{grid-template-columns:1fr; gap:48px;}
}

/* ---------- PORTFOLIO ---------- */
.filter-bar{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:48px;}
.filter-btn{
  font-size:13.5px;
  font-weight:600;
  padding:9px 18px;
  border:1px solid var(--gray-200);
  border-radius:999px;
  color:var(--gray-500);
  background:#fff;
  cursor:pointer;
  transition:all 0.2s;
}
.filter-btn:hover{border-color:var(--accent-tint); background:var(--accent-tint); color:var(--black);}
.filter-btn.active{background:var(--black); color:#fff; border-color:var(--black);}
.portfolio-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;}
.portfolio-card{
  position:relative;
  aspect-ratio:4/3;
  border-radius:24px;
  overflow:hidden;
  background-size:cover;
  background-position:center;
  background-color:var(--gray-100);
  transition:transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.portfolio-card:hover{transform:translateY(-6px); box-shadow:0 22px 44px rgba(10,10,10,0.16);}
/* Le visuel est une vraie image et non un fond CSS : c'est ce qui donne accès à
   `loading="lazy"`. Les vingt-et-une cartes du portfolio en fond représentaient une
   centaine de mégaoctets décodés d'un coup, et iOS abandonnait le rendu, d'où des
   cartes vides jusqu'à ce qu'un clic sur un filtre force un repaint. */
.portfolio-card-img{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.portfolio-card-img.is-top{object-position:top center;}
.portfolio-card::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg, transparent 35%, rgba(10,10,10,0.8) 100%);
}
.portfolio-card-tag{
  position:absolute;
  top:18px; right:18px;
  z-index:2;
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:10px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.7);
  border:1px dashed rgba(255,255,255,0.4);
  padding:5px 10px;
  border-radius:999px;
}
.portfolio-card-bottom{
  position:absolute;
  left:22px; right:22px; bottom:22px;
  z-index:2;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}
.portfolio-card-bottom .tag{
  display:block;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:6px;
}
.portfolio-card-bottom h3{color:#fff; font-size:18px; margin:0;}
.portfolio-card-plus{
  width:38px; height:38px;
  min-width:38px;
  border-radius:50%;
  background:rgba(255,255,255,0.15);
  border:1px solid rgba(255,255,255,0.45);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:19px;
  line-height:1;
}
@media (max-width:900px){
  .portfolio-grid{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:600px){
  .portfolio-grid{grid-template-columns:1fr;}
}

/* ---------- SAVOIR-FAIRE (un projet par spécialité) ---------- */
.range-section{background:var(--gray-50); padding:88px 0;}
.range-section .section-head{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:48px;
}
.range-intro{margin-top:18px;}
.range-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;}
.range-card{
  display:flex;
  flex-direction:column;
  background:var(--white);
  border:1px solid var(--gray-200);
  border-radius:0;
  overflow:hidden;
  transition:transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.range-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 44px rgba(10,10,10,0.12);
  border-color:var(--accent-light);
}
.range-card-media{
  aspect-ratio:4/3;
  background-size:cover;
  background-position:center;
  background-color:var(--gray-100);
}
.range-card-body{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:20px 22px 22px;
}
.range-card-label{
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:10px;
}
.range-card h3{font-size:17px; margin-bottom:8px;}
.range-card p{font-size:14px; line-height:1.5;}
.range-foot{text-align:center; margin-top:44px;}
@media (max-width:1100px){
  .range-grid{grid-template-columns:repeat(3, 1fr);}
}
@media (max-width:820px){
  .range-grid{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:520px){
  .range-grid{grid-template-columns:1fr;}
}

/* ---------- FORMULAIRE : piège à robots et message d'état ---------- */
.hp-field{
  position:absolute;
  width:1px; height:1px;
  margin:-1px;
  padding:0;
  border:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}
.form-status{
  margin-top:16px;
  font-size:14px;
  line-height:1.5;
  min-height:1px;
}
.form-status.is-ok{color:var(--accent-dark);}
.form-status.is-error{color:#B3261E;}
.form-status a{text-decoration:underline;}
.form-legal{
  margin-top:14px;
  font-size:12px;
  line-height:1.6;
  color:var(--gray-500);
}
.form-legal a{text-decoration:underline;}

/* ---------- FAQ ---------- */
.faq-section{padding:96px 0;}
.faq-section .section-head{margin-bottom:40px;}
.faq-list{max-width:820px; border-top:1px solid var(--gray-200);}
.faq-item{border-bottom:1px solid var(--gray-200);}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:22px 0;
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:18px;
  letter-spacing:-0.02em;
  color:var(--black);
  transition:color 0.2s var(--ease);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:hover{color:var(--accent);}
/* le signe +/− est décoratif : l'état ouvert/fermé est déjà porté par <details> */
.faq-item summary::after{
  content:'+';
  flex-shrink:0;
  font-size:22px;
  line-height:1;
  color:var(--accent);
  transition:transform 0.25s var(--ease);
}
.faq-item[open] summary::after{content:'−'; transform:rotate(180deg);}
.faq-answer{padding:0 0 24px; max-width:680px;}
.faq-answer p{font-size:15px;}
@media (max-width:600px){
  .faq-section{padding:72px 0;}
  .faq-item summary{font-size:16px; gap:16px;}
}

/* ---------- TESTIMONIALS ---------- */
.testimonial-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); gap:32px;}
.testimonial-card{padding:0;}
.testimonial-card p.quote{font-family:'Space Grotesk', sans-serif; font-size:19px; font-weight:500; color:var(--black); line-height:1.4;}
.testimonial-author{margin-top:20px; font-size:13.5px; color:var(--gray-500);}
.testimonial-author strong{color:var(--black);}

/* ---------- CONTACT ---------- */
.contact-cta{
  background:var(--gray-50);
  color:var(--black);
  text-align:center;
  padding:140px 0;
}
.contact-cta .eyebrow{color:var(--accent);}
.contact-cta h2{color:var(--black); font-size:clamp(32px,5vw,64px); margin-top:16px;}
.contact-cta p{color:var(--gray-500); max-width:520px; margin:20px auto 0;}
.contact-cta .hero-actions{justify-content:center; margin-top:44px; align-items:center;}
.contact-cta .btn-ghost{background:transparent; border-color:var(--gray-200); color:var(--black);}
.contact-cta .btn-ghost:hover{border-color:var(--black); background:#fff;}
.contact-cta .text-link{
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:15px;
  color:var(--black);
  border-bottom:1px solid var(--black);
  padding-bottom:2px;
  transition:color 0.2s, border-color 0.2s;
}
.contact-cta .text-link:hover{color:var(--accent); border-color:var(--accent);}

/* ---------- CTA CARD (homepage) ---------- */
.cta-showcase{padding:140px 0; background:var(--white);}
.cta-card{
  position:relative;
  border-radius:32px;
  overflow:hidden;
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  align-items:center;
  min-height:420px;
  background:radial-gradient(120% 100% at 15% 15%, var(--accent-mid) 0%, var(--accent) 45%, var(--accent-dark) 100%);
}
.cta-card-text{padding:56px 64px;}
.cta-card-text .eyebrow{color:rgba(255,255,255,0.75);}
.cta-card-text h2{color:#fff; font-size:clamp(26px,3.4vw,42px); margin-top:14px; max-width:420px;}
.cta-card-form-btn{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:36px;
  background:var(--accent-light);
  color:var(--accent-dark);
  font-size:14px; font-weight:600;
  padding:15px 26px;
  border-radius:999px;
  white-space:nowrap;
  transition:background 0.2s, transform 0.2s;
}
.cta-card-form-btn:hover{background:#fff; transform:translateX(2px);}
.cta-card-form-btn svg{width:15px; height:15px; flex-shrink:0;}
.cta-card-visual{
  position:relative;
  align-self:stretch;
  margin:24px 24px 24px 0;
  border-radius:24px;
  background:linear-gradient(160deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04));
  border:1px solid rgba(255,255,255,0.2);
  min-height:320px;
}
@media (max-width:900px){
  .cta-card{grid-template-columns:1fr;}
  .cta-card-visual{margin:0 24px 24px; min-height:220px;}
  .cta-card-text{padding:48px 32px 24px;}
}

/* ---------- CONTACT : DA VERTE ---------- */
.contact-jade{
  position:relative;
  overflow:hidden;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.09) 0, rgba(255,255,255,0.09) 1px, transparent 1px, transparent 64px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.09) 0, rgba(255,255,255,0.09) 1px, transparent 1px, transparent 64px),
    radial-gradient(120% 90% at 30% 0%, var(--accent-light) 0%, var(--accent-mid) 30%, var(--accent) 62%, var(--accent-dark) 100%);
}
.contact-jade .eyebrow{color:rgba(255,255,255,0.75);}
.contact-jade h2{color:#fff;}
.contact-jade p{color:rgba(255,255,255,0.82);}
.contact-jade .btn-ghost{background:#fff; border-color:#fff; color:var(--black);}
.contact-jade .btn-ghost:hover{background:var(--accent-tint); border-color:var(--accent-tint);}

/* ---------- CONTACT FORM ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:70px;}
form{display:flex; flex-direction:column; gap:18px;}
label{
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--gray-500);
  margin-bottom:6px;
  display:block;
}
input, textarea, select{
  width:100%;
  background:#fff;
  border:1px solid var(--gray-200);
  color:var(--black);
  padding:13px 16px;
  font-family:'Inter', sans-serif;
  font-size:14.5px;
  border-radius:var(--radius-sm);
  transition:border-color 0.2s;
}
input:focus, textarea:focus, select:focus{border-color:var(--accent); outline:none;}
textarea{resize:vertical; min-height:120px;}
.field{display:flex; flex-direction:column;}
.submit-btn{
  background:var(--black);
  color:#fff;
  border:none;
  padding:15px 28px;
  font-size:14px;
  font-weight:600;
  border-radius:999px;
  cursor:pointer;
  transition:background 0.2s;
  align-self:flex-start;
}
.submit-btn:hover{background:var(--accent);}
.info-line{
  display:flex;
  justify-content:space-between;
  padding:14px 0;
  border-top:1px solid var(--gray-200);
  font-size:14px;
}
.info-line:last-child{border-bottom:1px solid var(--gray-200);}
@media (max-width:760px){
  .contact-grid{grid-template-columns:1fr;}
}

/* ---------- PROJECT DETAIL PAGE ---------- */
.project-back{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  font-weight:600;
  color:var(--gray-500);
  margin-bottom:32px;
}
.project-back:hover{color:var(--black);}
.project-tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px;}
.project-tags span{
  font-size:11px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--accent);
  border:1px solid var(--gray-200);
  padding:6px 14px;
  border-radius:999px;
}
.project-hero-visual{
  width:100%;
  aspect-ratio:16/8;
  border-radius:var(--radius);
  background-size:cover;
  background-position:center;
  margin-top:48px;
}
.project-meta{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:32px;
  margin-top:56px;
  padding-top:32px;
  border-top:1px solid var(--gray-200);
}
.project-meta h4{font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:var(--gray-500); font-family:'Inter', sans-serif; font-weight:600;}
.project-meta p{margin-top:8px; font-size:15px; color:var(--black);}
.project-gallery{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
  margin-top:64px;
}
.project-gallery > div{
  aspect-ratio:1/1;
  border-radius:var(--radius);
  background-size:cover;
  background-position:center;
  background-color:var(--gray-100);
}
.project-gallery .tall{
  grid-row:span 2;
  aspect-ratio:1/2;
  background-size:contain;
  background-repeat:no-repeat;
}
@media (max-width:700px){
  .project-meta{grid-template-columns:1fr; gap:20px;}
  .project-gallery{grid-template-columns:repeat(2, 1fr);}
  .project-gallery .tall{grid-row:span 1; aspect-ratio:1/1; background-size:contain;}
}

.pages-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; align-items:start; margin-top:24px;}
.pages-grid img{width:100%; border-radius:var(--radius); display:block;}
@media (max-width:700px){
  .pages-grid{grid-template-columns:repeat(2, 1fr);}
}

.newsletter-row{display:flex; align-items:flex-start; gap:20px; flex-wrap:wrap; margin-top:24px;}
.newsletter-thumb{
  width:260px;
  max-width:100%;
  border-radius:var(--radius);
  box-shadow:0 12px 30px rgba(10,10,10,0.12);
  display:block;
}

.video-thumb{
  width:220px;
  max-width:100%;
  aspect-ratio:9/16;
  object-fit:cover;
  border-radius:var(--radius);
  box-shadow:0 12px 30px rgba(10,10,10,0.12);
  display:block;
  background:var(--gray-100);
}

/* ---------- FOOTER ---------- */
.site-footer{
  position:relative;
  overflow:hidden;
  padding:96px 0 32px;
  background:linear-gradient(160deg, var(--accent-light) 0%, var(--accent-mid) 20%, var(--accent) 42%, var(--accent-dark) 65%, #051A12 100%);
  color:#fff;
}
.footer-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:start;
  gap:32px;
  padding-bottom:64px;
}
.footer-social{justify-self:start; display:flex; gap:26px; align-items:center; background:none; border:none;}
.footer-social a{color:#fff; display:flex; opacity:0.85; transition:opacity .2s; background:none;}
.footer-social a:hover{opacity:1;}
.footer-social svg{width:32px; height:32px;}
.footer-logo{
  justify-self:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.footer-logo-mark{height:72px; width:auto; display:block;}
.footer-logo-name{
  font-family:'Inter', sans-serif;
  font-size:14.5px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.75);
}
nav.footer-nav{
  justify-self:end;
  max-width:none;
  width:auto;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  gap:14px;
  background:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:none;
  border-radius:0;
  box-shadow:none;
}
.footer-nav a{font-size:14px; font-weight:500; color:rgba(255,255,255,0.85); transition:color .2s; background:none;}
.footer-nav a:hover{color:#fff;}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:28px;
  border-top:1px solid rgba(255,255,255,0.18);
  font-size:12.5px;
  color:rgba(255,255,255,0.7);
  flex-wrap:wrap;
  gap:12px;
}
nav.footer-legal{
  max-width:none;
  width:auto;
  margin:0;
  padding:0;
  display:flex;
  gap:20px;
  background:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:none;
  border-radius:0;
  box-shadow:none;
}
.footer-legal a{color:rgba(255,255,255,0.7); transition:color .2s; background:none;}
.footer-legal a:hover{color:#fff;}
/* Les règles de base sont écrites `nav.footer-nav` / `nav.footer-legal` pour
   neutraliser le style du menu principal : la reprise mobile doit porter le même
   sélecteur, sinon elle perd l'arbitrage de spécificité et le bloc reste à droite. */
@media (max-width:760px){
  .footer-grid{grid-template-columns:1fr; text-align:center;}
  .footer-social{justify-self:center;}
  /* Les deux blocs portent aussi la classe `wrap`, dont la reprise à 420px pose un
     `padding` raccourci qui remettait ces marges verticales à zéro : le filet venait
     alors toucher la dernière ligne du menu. Doubler la classe passe devant. */
  .wrap.footer-grid{padding-bottom:52px;}
  .wrap.footer-bottom{padding-top:26px;}
  /* Deux colonnes plutôt qu'une pile : Contact et Services sur une ligne,
     Portfolio et À propos sur la suivante. L'ordre du HTML donne déjà ce
     découpage, il n'y a rien à réorganiser. */
  nav.footer-nav{
    justify-self:center;
    display:grid;
    grid-template-columns:repeat(2, auto);
    justify-content:center;
    column-gap:44px;
    row-gap:16px;
    text-align:center;
  }
  .footer-bottom{justify-content:center; text-align:center;}
  nav.footer-legal{justify-content:center; flex-wrap:wrap;}
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .about-grid{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .nav-links{
    position:absolute; top:calc(100% + 12px); left:0; right:0;
    background:rgba(255,255,255,0.82);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(10,10,10,0.06);
    border-radius:24px;
    box-shadow:0 12px 32px rgba(10,10,10,0.08);
    flex-direction:column; align-items:flex-start;
    padding:24px 28px; gap:20px; display:none;
  }
  .nav-links.open{display:flex;}
  .burger{display:block;}
  /* Le CTA reste dans le menu déroulant plutôt que de disparaître : c'est la seule
     porte d'entrée vers le contact quand la barre est réduite au burger. Il se
     détache des liens de navigation par un filet et prend toute la largeur. */
  .nav-links .nav-cta{
    align-self:stretch;
    text-align:center;
    margin-top:4px;
    padding:13px 22px;
    font-size:14.5px;
  }
  .nav-links .nav-cta::before{
    content:'';
    position:absolute;
    left:0; right:0; top:-14px;
    height:1px;
    background:rgba(10,10,10,0.08);
  }
}
@media (max-width:420px){
  .wrap{padding:0 20px;}
  header{padding:20px 20px 0;}
  nav{width:100%; padding:16px 20px;}
}

/* ---------- RYTHME VERTICAL MOBILE ----------
   Les 140px de respiration du bureau représentent un tiers d'un écran de
   téléphone. Les sections qui portent leur padding en classe (proto-sage,
   cta-showcase, range-section, engagement-section) ne sont pas atteintes par
   la règle `section`, plus faible en spécificité : elles sont reprises une à une. */
@media (max-width:760px){
  section{padding:72px 0;}
  /* L'en-tête est en position fixe : la première section de chaque page doit
     garder de quoi passer dessous. Les pages qui posent un padding-top en style
     en ligne (CGV, mentions, projets) ne sont pas concernées, il l'emporte. */
  main > section:first-child{padding-top:124px;}
  .proto-sage{padding:72px 0;}
  .cta-showcase{padding:72px 0;}
  .range-section{padding:64px 0;}
  .engagement-section{padding:64px 0;}
  .faq-section{padding:64px 0;}
  .hero-d-card{padding:36px 24px;}
  .hero-actions{margin-top:32px;}
}
@media (max-width:420px){
  section{padding:56px 0;}
  main > section:first-child{padding-top:116px;}
  .proto-sage{padding:56px 0;}
  .cta-showcase{padding:56px 0;}
  .range-section{padding:52px 0;}
  .engagement-section{padding:52px 0;}
  .faq-section{padding:52px 0;}
  .hero-d-card{padding:32px 20px;}
  .hero-actions{margin-top:28px;}
}