/* ===== Design tokens ===== */
:root{
  --navy: #070a14;
  --paper: #eef1f6;
  --dim: #aab5c9;
  --signal: #2fd8c8;
  --indigo: #3a2fb8;
  --violet: #7b3fd8;
  --blue: #2f6fe8;
  --line: rgba(238,241,246,0.1);
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --yc-bg-blur: 60px;
  --yc-bg-opacity: 1;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--navy);
  color:var(--paper);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  line-height:0.96;
  font-weight:600;
  letter-spacing:-0.02em;
  margin:0;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.yc-wrap{ max-width:1280px; margin:0 auto; padding:0 32px; }

/* ===== Fond vivant (bandes qui dérivent au hasard) ===== */
.yc-layers{ position:fixed; inset:-20%; z-index:0; overflow:hidden; pointer-events:none; }
.yc-band{ position:absolute; filter:blur(var(--yc-bg-blur)); mix-blend-mode:screen; will-change:transform; }
.yc-band.b1{ width:160vw; height:70vh; top:-10%; left:-40%;
  background:linear-gradient(115deg, transparent, var(--indigo) 35%, var(--blue) 65%, transparent 92%); opacity:calc(0.68 * var(--yc-bg-opacity)); }
.yc-band.b2{ width:150vw; height:65vh; top:25%; left:-45%;
  background:linear-gradient(115deg, transparent, var(--violet) 35%, var(--signal) 65%, transparent 92%); opacity:calc(0.58 * var(--yc-bg-opacity)); }
.yc-band.b3{ width:140vw; height:60vh; top:55%; left:-35%;
  background:linear-gradient(115deg, transparent, var(--blue) 35%, var(--indigo) 65%, transparent 92%); opacity:calc(0.48 * var(--yc-bg-opacity)); }
.yc-scrim{ position:fixed; inset:0; z-index:1; pointer-events:none; background:rgba(7,10,20,0.42); }

@media (prefers-reduced-motion: reduce){ .yc-band{ transform:none !important; } }

/* ===== Nav ===== */
.yc-nav{ position:fixed; top:0; left:0; right:0; z-index:50; padding:26px 0; mix-blend-mode:difference; }
.yc-nav .yc-wrap{ display:flex; justify-content:space-between; align-items:center; }
.yc-logo{ font-family:var(--font-display); font-weight:700; font-size:19px; color:#fff; }
.yc-navlinks{ display:flex; gap:34px; font-size:13px; font-weight:500; }
.yc-navlinks a{ opacity:0.85; color:#fff; transition:opacity .2s; }
.yc-navlinks a:hover{ opacity:1; }
.yc-burger{ display:none; background:none; border:none; cursor:pointer; flex-direction:column; gap:6px; width:32px; padding:8px; }
.yc-burger span{ display:block; height:1.5px; background:#fff; }
@media (max-width:720px){
  .yc-navlinks{ display:none; }
  .yc-burger{ display:flex; }
}
.yc-mobile-menu{
  position:fixed; inset:0; z-index:55; background:var(--navy);
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:32px;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s;
}
.yc-mobile-menu.open{ opacity:1; visibility:visible; transform:translateY(0); }
.yc-mobile-menu a{ font-family:var(--font-display); font-size:30px; font-weight:600; color:#fff; }

/* ===== Hero ===== */
.yc-hero{ position:relative; min-height:94vh; display:flex; align-items:center; padding:100px 0 60px; overflow:hidden; }
.yc-hero-eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:13px; margin-bottom:24px; font-weight:500; color:var(--dim); }
.yc-hero-eyebrow::before{ content:''; width:26px; height:2px; background:var(--signal); }
.yc-hero h1{ font-size:clamp(42px,7.5vw,112px); margin-bottom:26px; color:#fff; text-shadow:0 4px 32px rgba(0,0,0,0.4); }
.yc-hero h1 .accent{
  background:linear-gradient(100deg, var(--signal), var(--blue) 50%, var(--violet));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.yc-hero p{ font-size:17px; max-width:44ch; font-weight:400; margin-bottom:40px; color:var(--dim); }

.yc-btn{
  display:inline-flex; align-items:center; gap:12px; background:var(--paper); color:var(--navy);
  padding:18px 38px; font-size:14px; font-weight:600; border:none; cursor:pointer;
  clip-path:polygon(0 0, 100% 0, 96% 100%, 0% 100%); transition:background .25s ease;
}
.yc-btn:hover{ background:var(--signal); }

/* ===== Cartes en verre liquide ===== */
.yc-glass-card{
  position:relative; overflow:hidden;
  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(28px) saturate(160%);
  -webkit-backdrop-filter:blur(28px) saturate(160%);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:28px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 20px 50px rgba(0,0,0,0.3);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.yc-glass-card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 28px 60px rgba(0,0,0,0.38);
}

/* ===== Section commune ===== */
.yc-section{ position:relative; z-index:2; padding:100px 0; }
.yc-section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:50px; }
.yc-section-num{ font-size:13px; color:var(--dim); margin-bottom:14px; font-weight:500; }
.yc-section-head h2{ font-size:clamp(28px,3.6vw,46px); max-width:14ch; color:#fff; }
.yc-section-intro{ max-width:300px; font-size:14px; color:var(--dim); text-align:right; }
@media (max-width:720px){
  .yc-section-head{ flex-direction:column; align-items:flex-start; gap:16px; }
  .yc-section-intro{ text-align:left; }
}

/* ===== Grille de prestations ===== */
.yc-pillars{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.yc-pillar{ padding:56px 46px; }
.yc-pillar-tag{ font-size:13px; color:var(--signal); margin-bottom:24px; font-weight:600; }
.yc-pillar h3{ font-size:clamp(24px,2.4vw,32px); margin-bottom:18px; color:#fff; }
.yc-pillar p{ color:var(--dim); font-size:15px; max-width:36ch; margin:0 0 24px; }
.yc-pillar-link{ font-size:14px; border-top:1px solid rgba(255,255,255,0.1); padding-top:16px; display:block; color:#fff; }
@media (max-width:720px){ .yc-pillars{ grid-template-columns:1fr; } }

/* ===== Grille portfolio ===== */
.yc-portfolio-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.yc-proj{ position:relative; overflow:hidden; border-radius:20px; aspect-ratio:4/3; display:block; }
.yc-proj img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.16,1,.3,1); }
.yc-proj:hover img{ transform:scale(1.06); }
.yc-proj-shade{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(7,10,20,0.9) 0%, rgba(7,10,20,0.1) 55%); }
.yc-proj-info{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:22px; }
.yc-proj-info .cat{ font-size:12px; color:var(--dim); margin-bottom:6px; }
.yc-proj-info h4{ font-size:19px; color:#fff; font-weight:500; }
@media (max-width:900px){ .yc-portfolio-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .yc-portfolio-grid{ grid-template-columns:1fr; } }

/* ===== Contact ===== */
.yc-contact-card{ padding:100px 40px; text-align:center; }
.yc-contact-card h2{ font-size:clamp(36px,6vw,80px); margin-bottom:30px; color:#fff; }
.yc-contact-card p{ color:var(--dim); font-size:16px; margin-bottom:40px; }

.yc-form{ max-width:560px; margin:0 auto; display:flex; flex-direction:column; gap:22px; text-align:left; }
.yc-form label{ font-size:13.5px; color:var(--dim); display:block; margin-bottom:8px; }
.yc-form input, .yc-form textarea{
  width:100%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14);
  color:#fff; padding:14px 16px; font-family:var(--font-body); font-size:16px; border-radius:10px;
}
.yc-form input:focus, .yc-form textarea:focus{ outline:none; border-color:var(--signal); }
.yc-honeypot{ position:absolute; left:-9999px; }
.yc-form-status{ font-size:14px; min-height:20px; }
.yc-form-status.ok{ color:var(--signal); }
.yc-form-status.error{ color:#ff6b6b; }

/* ===== Footer ===== */
.yc-footer{ position:relative; z-index:2; padding:50px 0; border-top:1px solid var(--line); }
.yc-footer .yc-wrap{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:13px; color:var(--dim); }
.yc-footer a{ text-decoration:underline; }

/* ===== Contenu texte générique (page, single) ===== */
.yc-prose{ max-width:720px; margin:0 auto; padding:140px 32px 100px; position:relative; z-index:2; }
.yc-prose h1{ font-size:clamp(34px,5vw,60px); margin-bottom:30px; color:#fff; }
.yc-prose p{ color:var(--dim); font-size:17px; line-height:1.8; margin-bottom:20px; }
.yc-prose a{ color:var(--signal); text-decoration:underline; }

/* ===== Fiche prestation ===== */
.yc-service-hero{ position:relative; z-index:2; padding:170px 0 60px; }
.yc-service-hero h1{ font-size:clamp(36px,5.5vw,68px); color:#fff; margin:18px 0 22px; }
.yc-service-summary{ color:var(--dim); font-size:17px; max-width:60ch; }
.yc-service-body{ max-width:820px; }
.yc-service-card{ padding:56px 50px; }
.yc-content p{ color:var(--dim); font-size:16px; line-height:1.8; margin-bottom:18px; }
.yc-content h2{ color:#fff; font-size:24px; margin:34px 0 16px; }
.yc-content h2:first-child{ margin-top:0; }
.yc-content ul{ margin:0 0 20px; padding-left:22px; }
.yc-content li{ color:var(--dim); font-size:16px; line-height:1.7; margin-bottom:10px; }
.yc-content strong{ color:#fff; font-weight:600; }
.yc-service-card .yc-btn{ margin-top:20px; }

/* ===== Sous-prestations dissociées ===== */
.yc-subservice{ padding-top:0; padding-bottom:0; margin-bottom:60px; }
.yc-subservice-card{ padding:50px 46px; max-width:760px; }
.yc-subservice-icon{ color:var(--signal); margin-bottom:20px; }
.yc-subservice-card h2{ color:#fff; font-size:clamp(26px,3vw,36px); margin-bottom:16px; }
.yc-subservice-text{ color:var(--dim); font-size:16px; line-height:1.8; margin-bottom:8px; }
.yc-subservice-card h3{ color:#fff; font-size:19px; margin:30px 0 14px; font-family:var(--font-display); font-weight:600; }
.yc-process-list{ list-style:none; margin:0 0 10px; padding:0; }
.yc-process-list li{ color:var(--dim); font-size:15px; line-height:1.7; padding-left:22px; position:relative; margin-bottom:10px; }
.yc-process-list li::before{ content:'→'; position:absolute; left:0; color:var(--signal); }
.yc-process-list li strong{ color:#fff; }
.yc-subservice-examples{ margin-top:32px; max-width:900px; }
.yc-portfolio-grid-mini{ grid-template-columns:repeat(3,1fr); }
.yc-portfolio-grid-mini .yc-proj{ aspect-ratio:1/1; }
@media (max-width:720px){
  .yc-subservice-card{ padding:36px 26px; }
  .yc-portfolio-grid-mini{ grid-template-columns:1fr 1fr; }
}
.yc-subservice-cta{ margin-top:28px; }

/* ===== Disposition image + texte, et carrousel ===== */
.yc-subservice-split{ display:grid; grid-template-columns:1fr 1.25fr; gap:0; max-width:none; padding:0; overflow:hidden; align-items:stretch; }
.yc-subservice-media{ position:relative; min-height:320px; }
.yc-subservice-media img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.yc-subservice-media-placeholder{ width:100%; height:100%; position:absolute; inset:0; background:rgba(255,255,255,0.04); }
.yc-subservice-content{ padding:50px 48px; }
.yc-subservice-content h2{ color:#fff; font-size:clamp(26px,3vw,36px); margin-bottom:16px; }
@media (max-width:860px){
  .yc-subservice-split{ grid-template-columns:1fr; }
  .yc-subservice-media{ min-height:220px; }
  .yc-subservice-content{ padding:36px 26px; }
}

.yc-subservice-examples{ margin-top:36px; }
.yc-carousel{ position:relative; }
.yc-carousel-track{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; padding:4px 56px 10px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent);
}
.yc-carousel-track::-webkit-scrollbar{ display:none; }
.yc-carousel-item{ flex:0 0 260px; scroll-snap-align:start; aspect-ratio:4/3; }
.yc-carousel-arrow{
  position:absolute; top:calc(50% - 10px); transform:translateY(-50%); z-index:3;
  width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,0.2);
  background:rgba(7,10,20,0.75); backdrop-filter:blur(6px); color:#fff; font-size:20px;
  cursor:pointer; line-height:1;
}
.yc-carousel-arrow.prev{ left:0; }
.yc-carousel-arrow.next{ right:0; }
.yc-carousel-arrow:hover{ background:var(--signal); color:var(--navy); }
@media (max-width:720px){
  .yc-carousel-arrow{ display:none; }
  .yc-carousel-track{ padding:4px 4px 10px; -webkit-mask-image:none; mask-image:none; }
}

/* ===== Filtres portfolio ===== */
.yc-filter-bar{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:40px; }
.yc-filter-btn{
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14);
  color:var(--dim); font-family:var(--font-body); font-size:13.5px; font-weight:500;
  padding:9px 18px; border-radius:999px; cursor:pointer; transition:all .2s ease;
}
.yc-filter-btn:hover{ border-color:rgba(255,255,255,0.3); color:#fff; }
.yc-filter-btn.active{ background:var(--signal); border-color:var(--signal); color:var(--navy); font-weight:600; }

/* ===== Blog ===== */
.yc-blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.yc-blog-card{ display:flex; flex-direction:column; overflow:hidden; }
.yc-blog-card-media{ aspect-ratio:16/10; }
.yc-blog-card-media img{ width:100%; height:100%; object-fit:cover; }
.yc-blog-card-body{ padding:24px; }
.yc-blog-date{ font-size:12.5px; color:var(--signal); font-weight:600; margin-bottom:10px; }
.yc-blog-card-body h3{ font-size:20px; color:#fff; margin-bottom:10px; line-height:1.25; }
.yc-blog-excerpt{ color:var(--dim); font-size:14.5px; line-height:1.6; }
@media (max-width:900px){ .yc-blog-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .yc-blog-grid{ grid-template-columns:1fr; } }

.yc-blog-single-media{ border-radius:20px; overflow:hidden; margin-bottom:28px; aspect-ratio:16/9; }
.yc-blog-single-media img{ width:100%; height:100%; object-fit:cover; }

.yc-pagination{ display:flex; justify-content:center; gap:8px; margin-top:50px; flex-wrap:wrap; }
.yc-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px;
  padding:0 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.14);
  color:var(--dim); font-size:14px; background:rgba(255,255,255,0.04);
}
.yc-pagination .page-numbers.current{ background:var(--signal); color:var(--navy); border-color:var(--signal); font-weight:600; }
.yc-pagination .page-numbers:hover{ border-color:rgba(255,255,255,0.3); color:#fff; }