/* =========================================================
   GRACYL — THEME CLAIR APPLE-LIKE
   CSS FUSIONNÉ / NETTOYÉ / RESPONSIVE EN FIN DE FICHIER
   ========================================================= */

/* -------------------- VARIABLES GLOBALES -------------------- */
:root{
  --brand:#FF168B;
  --ink:#0F172A;
  --muted:#5B6A7E;
  --bg:#F7F9FC;

  --stroke:rgba(0,0,0,.08);
  --radius-card:34px;
  --blur:24px;
  --shadow:0 20px 44px rgba(16,24,40,.10), 0 4px 12px rgba(16,24,40,.06);

  --wrap:1180px;
  --headerH:86px;

  --web-card-bg:#0f1a2acc;
  --web-card-fg:#e6eefc;
  --web-card-muted:#b8c7e3;
  --web-card-stroke:rgba(255,255,255,.04);
  --web-card-shadow:0 16px 44px rgba(0,0,0,.35);

  --hero-gap:24px;
}

/* -------------------- BASE -------------------- */
*,
*::before,
*::after{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  padding:0;
}

body{
  color:var(--ink);
  line-height:1.6;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(36% 28% at 72% 18%, rgba(255,22,139,.08), transparent 60%),
    radial-gradient(30% 24% at 28% 62%, rgba(122,168,255,.10), transparent 60%),
    var(--bg);
  padding-top:0px;
  overflow-x:hidden;
  position:relative;
}

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

img{
  max-width:100%;
  height:auto;
  display:block;
}

a{
  color:inherit;
  text-decoration:none;
}

h1,
h2,
h3,
.title{
  font-family:Manrope, Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight:600;
  letter-spacing:.1px;
  line-height:1.2;
}

.hero h1{
  font-weight:700;
}

.nowrap{
  white-space:nowrap;
}

.sr-only{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.section{
  padding:28px 0;
}

.grid{
  display:grid;
  gap:20px;
}

:focus-visible{
  outline:2px solid color-mix(in oklab, var(--brand), black 10%);
  outline-offset:3px;
}

/* -------------------- REVEAL -------------------- */
.reveal{
  opacity:0;
  transform:translateY(14px) scale(.985);
  filter:blur(6px);
  transition:
    opacity .72s ease,
    transform .72s cubic-bezier(.22,.61,.36,1),
    filter .72s ease;
  will-change:opacity, transform, filter;
}

.reveal.reveal-visible{
  opacity:1;
  transform:none;
  filter:blur(0);
}

.reveal[data-stagger]{
  transition-delay:var(--stagger, 0ms);
}

/* =========================================================
   HERO GÉNÉRIQUE
   ========================================================= */
.hero{
  position:relative;
  padding:calc(var(--headerH) + 24px) 0 40px;
}

.hero .hero-inner{
  max-width:900px;
  margin:0 auto;
  padding:40px;
  text-align:center;
  border-radius:30px;
  background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.70));
  border:1px solid var(--stroke);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}

.hero h1{
  margin:0 0 8px;
}

.hero .sub{
  color:#475569;
  font-size:1.1rem;
}

.hero .tagline{
  color:var(--muted);
}

.hero .accent{
  color:var(--brand);
  position:relative;
}

.hero .accent::after{
  content:"";
  position:absolute;
  inset:-8px -6px;
  z-index:-1;
  background:radial-gradient(60% 60% at 50% 40%, rgba(255,22,139,.18), transparent 70%);
  border-radius:28px;
  filter:blur(8px);
}

.cta-row{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.75rem 1.2rem;
  border-radius:14px;
  font-weight:600;
  border:1px solid var(--stroke);
  transition:.25s;
}

.btn.brand{
  background:linear-gradient(
    180deg,
    color-mix(in oklab, var(--brand) 92%, white 8%),
    color-mix(in oklab, var(--brand) 82%, white 18%)
  );
  color:#fff;
  box-shadow:0 10px 22px rgba(255,22,139,.22), inset 0 1px 0 rgba(255,255,255,.28);
}

.btn.brand:hover{
  filter:saturate(105%) brightness(1.03);
}

.btn.ghost{
  background:rgba(255,255,255,.85);
  color:var(--ink);
  border:1px solid rgba(0,0,0,.15);
  padding:.75rem 1rem;
  border-radius:12px;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.btn.ghost:hover{
  background:rgba(255,255,255,.96);
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}

.halos{
  position:absolute;
  inset:-20% -10% auto -10%;
  height:70vh;
  z-index:-1;
  background:
    radial-gradient(28% 24% at 70% 18%, rgba(255,22,139,.12), transparent 60%),
    radial-gradient(26% 22% at 34% 68%, rgba(121,167,255,.14), transparent 60%);
  filter:blur(24px);
  opacity:.9;
}

/* =========================================================
   BURGER + NAV
   ========================================================= */
.burger{
  margin-left:auto;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.75);
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(10px) saturate(160%);
  -webkit-backdrop-filter:blur(10px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 6px 16px rgba(16,24,40,.10);
  cursor:pointer;
  transition:background .2s, box-shadow .2s, transform .2s;
}

.burger:hover{
  background:rgba(255,255,255,.75);
  transform:translateY(-1px);
}

.burger span{
  width:22px;
  height:2px;
  background:#1F2A44;
  border-radius:2px;
  display:block;
  transition:transform .25s, opacity .2s, width .2s;
}

.burger span + span{
  margin-top:6px;
}

.site-header.open .burger span:nth-child(1){
  transform:translateY(8px) rotate(45deg);
}

.site-header.open .burger span:nth-child(2){
  opacity:0;
}

.site-header.open .burger span:nth-child(3){
  transform:translateY(-8px) rotate(-45deg);
}

.site-header.open .main-nav{
  display:block;
  position:fixed;
  left:16px;
  right:16px;
  top:calc(var(--headerH) + 12px);
  z-index:2000;
  border-radius:18px;
  padding:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.74));
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 22px 46px rgba(16,24,40,.18), inset 0 1px 0 rgba(255,255,255,.7);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  opacity:0;
  transform:translateY(-8px);
  animation:menuIn .18s ease forwards;
}

@keyframes menuIn{
  to{
    opacity:1;
    transform:none;
  }
}

.site-header.open .nav{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:0;
  padding:0;
}

.site-header.open .nav > li > a{
  display:block;
  padding:12px 14px;
  border-radius:12px;
  background:rgba(255,255,255,.66);
  border:1px solid rgba(0,0,0,.04);
}

/* =========================================================
   OFFRES / CARTES GÉNÉRIQUES
   ========================================================= */
.offres-hero{
  position:relative;
  z-index:1;
  overflow:visible;
  padding-top:clamp(32px,4vw,64px);
  padding-bottom:clamp(32px,5vw,80px);
}

.offres-hero .title{
  font-size:clamp(28px, 4vw, 44px);
  line-height:1.1;
  letter-spacing:-0.02em;
  margin:0 0 8px;
}

.offres-hero .lead{
  opacity:.85;
  font-size:clamp(16px,1.6vw,18px);
  margin:0 0 28px;
}

.offres-hero::before{
  content:"";
  position:absolute;
  top:-200px;
  left:calc(50% - 50vw);
  width:100vw;
  height:1400px;
  pointer-events:none;
  z-index:0;
  background:radial-gradient(
    90% 70% at 50% 0,
    rgba(80,200,255,.40),
    rgba(120,180,255,.35) 35%,
    rgba(160,120,255,.28) 70%,
    transparent 100%
  );
  filter:blur(80px) saturate(140%);
  transform-origin:top center;
  animation:paintSpread 24s ease-in-out infinite;
}

@keyframes paintSpread{
  0%   { transform:translateY(0) scaleY(0.18); opacity:.85; }
  25%  { transform:translateY(0) scaleY(1); opacity:1; }
  50%  { transform:translateY(220px) scaleY(1.35); opacity:.95; }
  75%  { transform:translateY(0) scaleY(1); opacity:1; }
  100% { transform:translateY(0) scaleY(0.18); opacity:.85; }
}

.offres-hero .grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2vw,28px);
  max-width:1200px;
  margin:0 auto;
}

.offres-hero .card{
  position:relative;
  text-align:center;
  padding:2rem;
  border-radius:22px;
  background:rgba(255,255,255,.55);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 18px 40px rgba(0,0,0,.10), 0 1px 0 rgba(255,255,255,.6) inset;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  overflow:hidden;
  background-clip:padding-box;
  opacity:0;
  transform:translateY(20px) scale(.985);
  filter:blur(6px);
  will-change:transform, opacity, filter;
}

.offres-hero .card.reveal{
  animation:revealCard .9s cubic-bezier(.25,.8,.25,1) forwards;
  animation-delay:var(--delay,0ms);
}

@keyframes revealCard{
  0%{
    opacity:0;
    transform:translateY(20px) scale(.985);
    filter:blur(6px);
  }
  100%{
    opacity:1;
    transform:none;
    filter:none;
  }
}

.offres-hero .card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 40%),
    radial-gradient(120% 80% at 10% 0%, rgba(255,255,255,.35), transparent 60%);
  mix-blend-mode:screen;
  opacity:.25;
}

.offres-hero .card:hover{
  transform:translateY(-4px);
  box-shadow:0 28px 60px rgba(0,0,0,.14), 0 1px 0 rgba(255,255,255,.65) inset;
  background:rgba(255,255,255,.62);
  border-color:rgba(255,255,255,.75);
}

.icon-badge{
  width:80px;
  height:80px;
  margin:0 auto 1.5rem;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.6), rgba(255,255,255,.1));
  backdrop-filter:blur(10px);
  box-shadow:0 6px 20px rgba(0,0,0,.08);
  transition:transform .35s cubic-bezier(.25,.8,.25,1), box-shadow .35s;
}

.card .icon-badge svg{
  width:44px;
  height:44px;
  color:#FF4FA0;
}

.icon-badge svg{
  stroke:var(--accent,#ff1f7a);
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .35s cubic-bezier(.25,.8,.25,1);
}

.card:hover .icon-badge{
  transform:translateY(-6px);
  box-shadow:0 12px 30px rgba(0,0,0,.15);
}

.card:hover .icon-badge svg{
  transform:scale(1.1);
}

.offres-hero .card h2{
  text-transform:uppercase;
  font-size:1rem;
  letter-spacing:.04em;
  margin-bottom:.75rem;
}

.offres-hero .punchline{
  font-size:1rem;
  line-height:1.4;
  color:#333;
  margin-bottom:1rem;
}

.offres-hero .card .link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:600;
  border-bottom:1px solid currentColor;
  padding-bottom:2px;
  transition:gap .2s ease, opacity .2s ease;
}

.offres-hero .card .link:hover{
  gap:10px;
  opacity:.9;
}

/* =========================================================
   SLICES / FAQ
   ========================================================= */
.slice{
  padding:clamp(40px,6vw,80px) 0;
}

.slice .wrap{
  max-width:1100px;
  margin:0 auto;
}

.slice-title{
  font-size:clamp(22px,3vw,28px);
  font-weight:700;
  letter-spacing:.01em;
  margin:0 0 .5rem;
}

.slice-sub{
  margin:0 0 1.25rem;
  color:#4a5568;
}

.slice-cta-offres{
  position:relative;
  text-align:center;
  padding:clamp(60px,10vw,100px) 20px;
  overflow:hidden;
  background:#fafbfd;
}

.slice-cta-offres::before{
  content:"";
  position:absolute;
  top:-80px;
  left:50%;
  transform:translate(-50%,0) scale(1);
  width:1400px;
  height:600px;
  z-index:0;
  background:radial-gradient(
    700px 300px at 50% 0,
    rgba(255,31,122,.35),
    rgba(255,120,180,.25) 40%,
    rgba(200,100,255,.18) 70%,
    transparent 100%
  );
  filter:blur(60px);
  animation:haloSpread 14s ease-in-out infinite;
}

@keyframes haloSpread{
  0%{ transform:translate(-50%,0) scale(1,1); filter:blur(60px); }
  40%{ transform:translate(-52%,120px) scale(1.2,1.35); filter:blur(70px); }
  70%{ transform:translate(-48%,160px) scale(1.35,1.5); filter:blur(80px); }
  100%{ transform:translate(-50%,0) scale(1,1); filter:blur(60px); }
}

.slice-cta-offres .wrap{
  position:relative;
  z-index:1;
}

.slice-cta-offres .btn.brand{
  min-width:auto;
  padding:.9rem 1.4rem;
  border-radius:16px;
  background:linear-gradient(180deg,#ff4aa0,#ff1f7a);
  color:#fff;
  font-weight:700;
  box-shadow:0 12px 28px rgba(255,31,122,.25);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.slice-cta-offres .btn.brand:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 36px rgba(255,31,122,.28);
  filter:saturate(1.05);
}

.slice-faq{
  background:
    linear-gradient(180deg, rgba(240,244,255,.55), rgba(255,255,255,0) 40%),
    linear-gradient(0deg, rgba(255,255,255,.85), rgba(255,255,255,.85));
  border-top:1px solid rgba(0,0,0,.05);
}

.faq{
  margin-top:1rem;
}

.faq-item{
  padding:.35rem 0;
}

.faq-item + .faq-item{
  border-top:1px solid rgba(0,0,0,.07);
}

.faq-q{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.2rem 1.6rem;
  text-align:left;
  background:transparent;
  border:0;
  font:inherit;
  font-weight:600;
  cursor:pointer;
  position:relative;
}

.faq-q::after{
  content:"";
  flex-shrink:0;
  width:28px;
  height:28px;
  border-radius:50%;
  background:rgba(255,255,255,.4);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.15), 0 1px 4px rgba(0,0,0,.08);
  transition:box-shadow .3s, background .3s, transform .3s;
  display:flex;
  align-items:center;
  justify-content:center;
}

.faq-a{
  overflow:hidden;
  max-height:0;
  opacity:0;
  transition:max-height .35s ease, opacity .25s ease;
  will-change:max-height, opacity;
}

.faq-item.open .faq-a{
  opacity:1;
}

.faq-a .inner{
  padding:6px 0 14px 0;
  max-width:70ch;
  color:#2d3748;
}

.faq-cta{
  text-align:center;
  margin-top:2.4rem;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background:linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.60));
  border-top:1px solid var(--stroke);
}

.site-footer .wrap{
  display:grid;
  gap:10px;
  padding:26px 20px;
  text-align:center;
}

.site-footer .slogan em{
  color:var(--brand);
  font-style:normal;
  font-weight:600;
}

.copy{
  color:#7C8AA0;
  font-size:.9rem;
}

/* =========================================================
   PAGE SITES INTERNET
   ========================================================= */
body[data-page="offres/sites-internet"]::before{
  content:"";
  position:absolute;
  top:-200px;
  left:50%;
  transform:translateX(-50%);
  width:140vw;
  height:2000px;
  z-index:-1;
  background:radial-gradient(
    90% 60% at 50% 0,
    rgba(70,220,255,.35),
    rgba(120,140,255,.28) 35%,
    rgba(80,220,180,.22) 70%,
    transparent 100%
  );
  filter:blur(90px) saturate(150%);
  max-width:100%;
}

.web-hero{
  position:relative;
  padding-top:120px;
}

section.page-web-hero{
  padding-top:70px;
  padding-bottom:68px;
  position:relative;
}

.hero-stack{
  max-width:1180px;
  margin:0 auto;
  padding:0 20px;
  position:relative;
}

.web-hero-head.centered{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:14px;
  margin:0 0 clamp(8px,1.6vw,14px);
}

.web-hero-head h1{
  font-size:clamp(36px, 5vw, 56px);
  line-height:1.1;
  margin:0;

  --r1:#ff176b;
  --r2:#ff6ab5;
  --v1:#b08cff;
  --v2:#8aa0ff;
  --b1:#6aa4ff;
  --b2:#22d3ee;

  background:
    linear-gradient(90deg,
      var(--b1) 0%,
      var(--b2) 16%,
      var(--v2) 34%,
      var(--v1) 50%,
      var(--r2) 72%,
      var(--r1) 100%
    ),
    linear-gradient(90deg,
      var(--r1) 0%,
      var(--r2) 22%,
      var(--v1) 48%,
      var(--v2) 66%,
      var(--b2) 84%,
      var(--b1) 100%
    );
  background-size:220% 100%, 240% 100%;
  background-position:0% 50%, 100% 50%;
  animation:titleSweep 14s linear infinite;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

.web-hero-head .lead{
  margin:0;
  color:#5B6A7E;
}

@keyframes titleSweep{
  0%{ background-position:0% 50%, 100% 50%; }
  100%{ background-position:-220% 50%, 320% 50%; }
}

/* ----- HERO PAINT ----- */
.gracyl-hero{
  position:relative;
}

.gracyl-hero::before{
  content:"";
  position:absolute;
  top:-220px;
  bottom:-220px;
  left:calc(50% - 50vw);
  width:100vw;
  pointer-events:none;
  z-index:0;
  background:radial-gradient(
    90% 70% at 50% 0,
    rgba(70,220,255,.45),
    rgba(120,140,255,.38) 35%,
    rgba(80,220,180,.30) 70%,
    transparent 100%
  );
  filter:blur(82px) saturate(150%);
  transform-origin:top center;
  animation:
    paintFall 6s cubic-bezier(.22,.9,.3,1) forwards,
    paintFloat 18s ease-in-out infinite 6s;
}

.gracyl-hero::after{
  content:"";
  position:absolute;
  top:0;
  left:calc(50% - 50vw);
  width:100vw;
  height:1600px;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(40% 28% at 60% 8%, rgba(70,220,255,.25), transparent 60%),
    radial-gradient(32% 26% at 28% 76%, rgba(120,140,255,.22), transparent 65%),
    radial-gradient(34% 26% at 78% 68%, rgba(80,220,180,.22), transparent 65%);
  filter:blur(90px) saturate(155%);
  mix-blend-mode:screen;
  opacity:0;
  animation:
    mirrorFadeIn 300ms ease-out forwards 6s,
    waterFlow 14s ease-in-out infinite alternate 6s,
    hueShift 36s ease-in-out infinite 6s;
}

@keyframes paintFall{
  0%{
    transform:translateY(-220px) scaleY(.2);
    opacity:.8;
  }
  40%{
    transform:translateY(0) scaleY(.7);
  }
  70%{
    transform:translateY(220px) scaleY(1.1);
  }
  100%{
    transform:translateY(340px) scaleY(1.25);
    opacity:1;
  }
}

@keyframes paintFloat{
  0%{
    transform:translateY(340px) translateX(-1%) scaleY(1.25);
  }
  25%{
    transform:translateY(360px) translateX(1%) scaleY(1.28);
  }
  50%{
    transform:translateY(330px) translateX(-1%) scaleY(1.23);
  }
  75%{
    transform:translateY(350px) translateX(.5%) scaleY(1.26);
  }
  100%{
    transform:translateY(340px) translateX(-1%) scaleY(1.25);
  }
}

@keyframes mirrorFadeIn{
  from{ opacity:0; }
  to{ opacity:.85; }
}

@keyframes waterFlow{
  0%{ background-position:55% 6%, 26% 74%, 80% 64%; }
  50%{ background-position:58% 10%, 24% 78%, 76% 68%; }
  100%{ background-position:52% 8%, 30% 72%, 82% 62%; }
}

@keyframes hueShift{
  0%{ filter:blur(90px) saturate(155%) hue-rotate(0deg); }
  50%{ filter:blur(92px) saturate(172%) hue-rotate(12deg); }
  100%{ filter:blur(90px) saturate(155%) hue-rotate(0deg); }
}

/* ----- VISUEL HERO ----- */
.band-visual{
  position:relative;
  display:block;
  text-align:center;
  margin-bottom:var(--hero-gap);
  z-index:1;
}

.laptop-float{
  display:inline-block;
  width:min(100%, clamp(520px,72vw,980px));
  max-width:100%;
  height:auto;
  opacity:0;
  --lift:38px;
  --bob:0px;
  transform:translateY(calc(var(--lift) + var(--bob)));
  transition:opacity 1.1s ease, transform 1.1s cubic-bezier(.22,.61,.36,1);
  filter:drop-shadow(0 24px 54px rgba(15,23,42,.18));
  will-change:transform, opacity;
  z-index:1;
}

.laptop-float.is-in{
  opacity:1;
  --lift:0px;
}

.hero-intro.center-intro{
  text-align:center;
  position:relative;
  z-index:1;
}

.band-title{
  margin:0 0 .65rem;
  font-size:clamp(20px,3vw,26px);
  font-weight:700;
  letter-spacing:.01em;
}

.hero-intro p,
.band p{
  color:var(--muted);
  max-width:72ch;
  margin-left:auto;
  margin-right:auto;
}

/* =========================================================
   DUO VITRINE / SHOP
   ========================================================= */
.web-duo{
  width:100%;
  max-width:100%;
  overflow-x:clip;
  padding:clamp(30px,5vw,60px) 0;
}

.web-duo .duo{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(18px,2vw,28px);
  width:100%;
  max-width:100%;
  align-items:stretch;
}

.duo-card{
  position:relative;
  width:100%;
  max-width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  padding:clamp(18px,2.2vw,24px);
  border-radius:22px;
  border:1px solid rgba(15,23,42,.06);
  background-clip:padding-box;
  box-shadow:0 16px 34px rgba(16,24,40,.08), inset 0 1px 0 rgba(255,255,255,.65);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  opacity:0;
  transform:translateY(16px) scale(.985);
  filter:blur(6px);
  overflow:hidden;
}

.duo-card.reveal{
  animation:duoIn .8s cubic-bezier(.25,.8,.25,1) forwards;
  animation-delay:var(--delay, 0ms);
}

@keyframes duoIn{
  to{
    opacity:1;
    transform:none;
    filter:none;
  }
}

.duo-card.tone--a{
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
}

.duo-card.tone--b{
  background:linear-gradient(180deg, #FCFEFF, rgba(252,254,255,.84));
}

.duo-card:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 46px rgba(16,24,40,.12), inset 0 1px 0 rgba(255,255,255,.7);
}

.duo-card .band-title{
  margin:2px 0 12px;
  font-size:clamp(20px, 2.2vw, 26px);
  font-weight:700;
  letter-spacing:.01em;
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.duo-media{
  flex:0 0 auto;
  width:100%;
  max-width:100%;
  margin:0 0 12px;
  padding:clamp(12px, 3vw, 28px);
  border-radius:14px;
  overflow:hidden;
  display:flex;
  justify-content:center;
  align-items:center;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,255,255,.25) 0%,
      rgba(255,255,255,.15) 40%,
      rgba(255,255,255,.05) 100%);
}

.offer-illus{
  display:block;
  width:min(100%, 520px);
  max-width:100%;
  height:auto;
  margin:0 auto;
  opacity:0;
  --lift:22px;
  --bob:0px;
  transform:translateY(calc(var(--lift) + var(--bob)));
  transition:opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1);
  filter:drop-shadow(0 18px 42px rgba(15,23,42,.14));
  will-change:transform, opacity;
}

.offer-illus.is-in{
  opacity:1;
  --lift:0px;
}

.offer-illus:hover{
  transform:translateY(var(--bob)) !important;
}

.duo-card:hover .duo-media img,
.duo-card:focus-within .duo-media img{
  transform:none !important;
  opacity:1 !important;
}

.duo-text{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  min-width:0;
}

.duo-text p{
  margin:.55rem 0;
  color:var(--muted, #5B6A7E);
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
  line-height:1.65;
}

.duo-text p:last-child{
  margin-bottom:0;
}

/* =========================================================
   FOUNDATIONS SECTION
   ========================================================= */
.detail-intro{
  margin:16px 0 28px;
  color:var(--muted, #5B6A7E);
  font-size:1.025rem;
  line-height:1.6;
}

.detail-intro.foundations-section{
  position:relative;
  padding:clamp(60px, 8vw, 120px) 0;
}

.detail-intro.foundations-section::before{
  content:"";
  position:absolute;
  top:0;
  left:calc(50% - 50vw);
  width:100vw;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(0,0,0,.12) 20%,
    rgba(0,0,0,.20) 50%,
    rgba(0,0,0,.12) 80%,
    transparent
  );
}

.foundations-head{
  text-align:center;
  max-width:820px;
  margin:0 auto 50px;
}

.foundations-head p{
  color:var(--muted, #5B6A7E);
  margin:.6rem 0;
}

/* ----- PORTRAIT GRID ----- */
.portrait-grid{
  max-width:1100px;
  margin:0 auto;
  padding:20px;
}

.portrait-track.portrait-grid-track{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:22px;
  justify-content:center;
  align-items:stretch;
  overflow:visible !important;
  scroll-snap-type:none !important;
  padding:0;
}

.portrait-card{
  position:relative;
  width:100%;
  max-width:340px;
  margin:auto;
  aspect-ratio:2 / 3;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:0;
  overflow:hidden;
  border-radius:22px;
  background:#fff;
  box-shadow:0 14px 32px rgba(0,0,0,.10);
  transition:transform .28s ease, box-shadow .28s ease;
}

.portrait-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 50px rgba(0,0,0,.16);
}

.portrait-card .portrait-bg{
  position:relative;
  width:100%;
  height:62%;
  z-index:0;
  display:block;
}

.portrait-card .portrait-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  background:transparent;
}

.portrait-card .portrait-body{
  position:relative;
  z-index:1;
  margin-top:auto;
  padding:16px 16px 18px;
  background:#fff;
}

.portrait-topic{
  font-size:.86rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin:0 0 6px;
  color:var(--card-accent,#666);
}

.portrait-headline{
  font-size:.98rem !important;
  font-weight:800;
  line-height:1.15;
  margin:0 44px 8px 0;
  color:#111;
  text-wrap:balance;
}

.portrait-sub{
  margin:0;
  font-size:.98rem;
  line-height:1.35;
  color:#5B6A7E;
  opacity:.92;
  max-width:none !important;
  width:auto !important;
}

.portrait-plus{
  position:absolute;
  top:12px;
  right:12px;
  z-index:5;
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.95);
  color:#0f172a;
  font-weight:700;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.16);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.portrait-plus:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(0,0,0,.20);
}

/* =========================================================
   MODAL PORTRAIT
   ========================================================= */
.portrait-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:4000;
  padding:12px;
  box-sizing:border-box;
}

.portrait-modal[aria-hidden="false"]{
  display:block;
}

.portrait-modal__overlay{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.45);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.portrait-modal__dialog{
  position:relative;
  width:min(920px, calc(100vw - 24px));
  max-width:calc(100vw - 24px);
  max-height:calc(100dvh - 24px);
  margin:0 auto;
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.86));
  border:1px solid rgba(0,0,0,.08);
  border-radius:22px;
  box-shadow:0 24px 64px rgba(0,0,0,.25);
  overflow:auto;
  box-sizing:border-box;
}

.portrait-modal__close{
  position:sticky;
  top:0;
  margin-left:auto;
  margin-right:6px;
  margin-top:6px;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  cursor:pointer;
  z-index:2;
}

.portrait-modal__content{
  padding:16px 18px 22px;
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  box-sizing:border-box;
}

.portrait-modal__content > *{
  max-width:100%;
  box-sizing:border-box;
}

.portrait-modal__content h3{
  color:var(--card-accent);
  text-shadow:0 0 12px color-mix(in srgb, var(--card-accent) 40%, transparent);
  margin:0 0 10px;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.portrait-modal__content h4{
  color:var(--card-accent);
  overflow-wrap:anywhere;
  word-break:break-word;
}

.portrait-modal__content p,
.portrait-modal__content small,
.portrait-modal__content figcaption{
  overflow-wrap:anywhere;
  word-break:break-word;
}

.portrait-modal__content .detail-copy{
  margin:10px 0 14px;
  color:var(--muted, #5B6A7E);
  font-size:1rem;
  line-height:1.65;
}

.portrait-modal__content .detail-copy p{
  margin:.55rem 0;
}

.portrait-modal__content .detail-copy strong{
  color:var(--ink, #0F172A);
}

.portrait-modal__content .detail-note{
  margin:12px 0 0;
  color:color-mix(in oklab, var(--muted, #5B6A7E), #000 10%);
  opacity:.95;
}

.portrait-modal__content .detail-note small{
  font-size:.92rem;
}

body.portrait-lock{
  overflow:hidden;
}

.detail-hero{
  margin:8px 0 18px;
  border-radius:calc(var(--radius-card) - 10px);
  overflow:hidden;
  box-shadow:0 10px 30px rgba(15,23,42,.12);
  width:100%;
  max-width:100%;
}

.detail-hero img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
}

.detail-hero figcaption{
  padding:8px 12px;
  font-size:.92rem;
  color:var(--muted, #5B6A7E);
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(247,249,252,.85));
  border-top:1px solid color-mix(in oklab, var(--stroke, rgba(0,0,0,.08)) 80%, transparent);
}

/* ----- DELIVERABLES ----- */
.deliverables-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px;
  margin:18px 0 8px;
}

.detail-grid.deliverables-grid article{
  background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.74));
  color:var(--muted, #5B6A7E) !important;
  border:1px solid color-mix(in oklab, var(--stroke, rgba(0,0,0,.08)) 80%, transparent);
  border-radius:calc(var(--radius-card) - 8px);
  box-shadow:0 0 0 1px rgba(255,255,255,.6) inset, 0 6px 20px rgba(15,23,42,.06);
  padding:16px 16px 14px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}

.detail-grid.deliverables-grid article:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 28px rgba(15,23,42,.10);
  border-color:color-mix(in oklab, var(--card-accent, var(--brand)) 30%, var(--stroke, rgba(0,0,0,.08)));
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.8));
}

.detail-grid.deliverables-grid article h4{
  color:var(--ink, #0F172A) !important;
  font-weight:700;
  border-left:3px solid var(--card-accent, var(--brand)) !important;
  padding-left:8px;
  margin:0 0 10px !important;
  font-size:16px !important;
}

.detail-grid.deliverables-grid article p{
  color:var(--muted, #5B6A7E) !important;
  margin:0;
  font-size:.98rem;
  line-height:1.5;
}

#portraitModal .portrait-modal__content .detail-grid.deliverables-grid{
  width:100% !important;
  max-width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
  overflow-x:hidden !important;
}

#portraitModal .portrait-modal__content .detail-grid.deliverables-grid > article{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
}

#portraitModal .portrait-modal__content .detail-grid.deliverables-grid *{
  white-space:normal !important;
}

/* =========================================================
   PM BAND — GESTION DE PROJET
   ========================================================= */
.pm-band.pm-band--full{
  width:100%;
  margin:clamp(18px, 3vw, 28px) 0 0;
  position:relative;
  background:
    radial-gradient(70% 90% at 18% 30%, rgba(18,179,255,.18), transparent 60%),
    radial-gradient(60% 80% at 78% 22%, rgba(124,140,255,.16), transparent 62%),
    radial-gradient(70% 90% at 72% 88%, rgba(255,93,122,.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
  border-top:1px solid rgba(15,23,42,.06);
  border-bottom:1px solid rgba(15,23,42,.06);
  padding:clamp(18px, 3vw, 30px) 0;
}

.pm-card{
  position:relative;
  border-radius:26px;
  padding:clamp(18px, 3vw, 26px);
  background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.74));
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 24px 70px rgba(15,23,42,.10);
  overflow:hidden;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.pm-card::before{
  content:"";
  position:absolute;
  inset:-240px -180px auto -180px;
  height:520px;
  pointer-events:none;
  background:
    radial-gradient(50% 60% at 35% 40%, rgba(18,179,255,.18), transparent 70%),
    radial-gradient(45% 55% at 70% 35%, rgba(124,140,255,.16), transparent 72%),
    radial-gradient(55% 70% at 60% 75%, rgba(255,93,122,.12), transparent 70%);
  filter:blur(26px) saturate(140%);
  opacity:.95;
}

.pm-top,
.pm-grid,
.pm-bottom{
  position:relative;
  z-index:1;
}

.pm-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0 0 10px;
  font-size:.86rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:color-mix(in oklab, var(--muted, #5B6A7E), #000 12%);
}

.pm-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(18,179,255,1), rgba(124,140,255,1), rgba(255,93,122,1));
  box-shadow:0 8px 20px rgba(18,179,255,.18);
}

.pm-title{
  margin:0 0 10px;
  font-size:clamp(20px, 2.2vw, 26px);
  letter-spacing:.01em;
  color:var(--ink, #0F172A);
}

.pm-lead{
  margin:0 0 16px;
  max-width:78ch;
  color:var(--muted, #5B6A7E);
  line-height:1.65;
}

.pm-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
  margin-top:12px;
}

.pm-block{
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.72));
  border:1px solid rgba(15,23,42,.06);
  box-shadow:0 10px 26px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.65);
  padding:14px 14px 12px;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.pm-block:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 38px rgba(15,23,42,.09);
  border-color:rgba(15,23,42,.10);
}

.pm-h4{
  margin:0 0 10px;
  font-size:1rem;
  font-weight:750;
  color:var(--ink, #0F172A);
  border-left:3px solid color-mix(in oklab, var(--brand, #12B3FF) 45%, rgba(124,140,255,1));
  padding-left:10px;
}

.pm-list{
  margin:0;
  padding:0;
  list-style:none;
  color:var(--muted, #5B6A7E);
  line-height:1.55;
  font-size:.98rem;
}

.pm-list li{
  position:relative;
  padding-left:22px;
  margin:8px 0;
}

.pm-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:10px;
  height:10px;
  border-radius:999px;
  background:color-mix(in oklab, var(--brand, #12B3FF) 55%, rgba(124,140,255,1));
  box-shadow:0 10px 22px rgba(18,179,255,.12);
}

.pm-bottom{
  margin-top:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.pm-badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.pm-badge{
  display:inline-flex;
  align-items:center;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.72);
  color:color-mix(in oklab, var(--ink, #0F172A), #000 6%);
  font-size:.92rem;
  box-shadow:0 10px 22px rgba(15,23,42,.05);
}

.pm-note{
  margin:0;
  max-width:58ch;
  color:color-mix(in oklab, var(--muted, #5B6A7E), #000 8%);
  line-height:1.6;
  font-size:.98rem;
}

.pm-card.reveal{
  opacity:0;
  transform:translateY(14px) scale(.985);
  filter:blur(6px);
}

.pm-card.reveal.reveal-visible{
  opacity:1;
  transform:none;
  filter:none;
}

/* =========================================================
   WEBCARD / NATIVE DETAIL
   ========================================================= */
.web-card{
  position:relative;
  background:var(--web-card-bg);
  color:var(--web-card-fg);
  border:1px solid var(--web-card-stroke);
  border-radius:18px;
  padding:28px;
  box-shadow:var(--web-card-shadow);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:
    transform .45s cubic-bezier(.22,.61,.36,1),
    box-shadow .45s cubic-bezier(.22,.61,.36,1),
    background .30s ease,
    border-color .30s ease,
    filter .30s ease;
  transform-origin:50% 60%;
  transform-style:preserve-3d;
  will-change:transform, box-shadow, filter;
  cursor:pointer;
  z-index:0;
  contain:paint;
  --accent:var(--card-accent, var(--brand, #FF168B));
}

.web-card:hover,
.web-card:focus-within{
  transform:translateY(-5px) scale(1.01);
  box-shadow:0 36px 120px rgba(0,0,0,.10);
  background:color-mix(in oklab, var(--web-card-bg, #0f1a2acc) 88%, black 12%);
  border-color:rgba(255,255,255,.80);
  z-index:5;
}

.web-card::before{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  bottom:-24px;
  height:36px;
  border-radius:999px;
  pointer-events:none;
  z-index:-1;
  background:radial-gradient(60% 120% at 50% 40%, rgba(0,0,0,.28), transparent 70%);
  filter:blur(12px);
  transform:translateY(0) scale(1);
  transition:transform .45s cubic-bezier(.22,.61,.36,1), filter .3s ease, opacity .3s ease;
  opacity:.8;
}

.web-card:hover::before,
.web-card:focus-within::before{
  transform:translateY(16px) scale(1.15);
  filter:blur(18px);
  opacity:.95;
}

.web-card h2{
  text-transform:uppercase;
  font-size:1rem;
  letter-spacing:.04em;
  margin:0 0 .75rem;
  color:#dbe6ff;
  padding-bottom:.4rem;
  border-bottom:1px solid transparent;
  transition:border-image .3s ease, color .2s ease;
}

.web-card:hover h2,
.web-card:focus-within h2{
  border-image:linear-gradient(
    90deg,
    color-mix(in oklab, var(--card-accent,#7aa2ff), white 25%),
    transparent
  ) 1;
  border-bottom:1px solid transparent;
}

.web-card p{
  color:var(--web-card-muted);
  margin:.6rem 0;
}

.web-card p strong{
  color:color-mix(in oklab, var(--card-accent, var(--brand, #FF168B)) 75%, var(--ink, #0F172A));
}

.web-card .card-plus{
  position:absolute;
  right:14px;
  bottom:14px;
  width:35px;
  height:35px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.85);
  background:rgba(255,255,255,.85);
  color:#0f172a;
  font-weight:700;
  line-height:1;
  box-shadow:0 6px 16px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.6);
  transform:translateZ(40px);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}

.web-card:hover .card-plus,
.web-card:focus-within .card-plus{
  transform:translateZ(60px) scale(1.06);
  box-shadow:0 12px 28px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.7);
  background:#fff;
  border-color:#fff;
}

/* =========================================================
   PAGE APPLICATIONS NATIVES
   ========================================================= */
body[data-page="offres/applications-natives"]{
  --appnative-brand:#FF168B;
  --appnative-ink:#0F172A;
  --appnative-muted:#5B6A7E;
  --appnative-stroke:rgba(0,0,0,.08);
  --appnative-shadow:0 20px 44px rgba(16,24,40,.10), 0 4px 12px rgba(16,24,40,.06);
  --appnative-radius:28px;
  --appnative-radius-sm:18px;
  --appnative-gap:22px;
  overflow-x:hidden;
}

body[data-page="offres/applications-natives"] .appnative-page,
body[data-page="offres/applications-natives"] .appnative-page *{
  box-sizing:border-box;
}

body.appnative-lock{
  overflow:hidden;
}

/* HERO */
body[data-page="offres/applications-natives"] .appnative-hero{
  position:relative;
  padding:120px 0 50px;
  overflow:hidden;
}

body[data-page="offres/applications-natives"] .appnative-hero::before{
  content:"";
  position:absolute;
  top:-220px;
  left:calc(50% - 50vw);
  width:100vw;
  height:1400px;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(80% 60% at 50% 0, rgba(70,220,255,.35), transparent 72%),
    radial-gradient(45% 35% at 22% 72%, rgba(255,22,139,.14), transparent 70%),
    radial-gradient(45% 35% at 82% 54%, rgba(124,140,255,.18), transparent 70%);
  filter:blur(80px) saturate(145%);
}

body[data-page="offres/applications-natives"] .appnative-hero__wrap{
  position:relative;
  z-index:1;
}

body[data-page="offres/applications-natives"] .appnative-hero__head{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:16px;
  margin-bottom:34px;
}

body[data-page="offres/applications-natives"] .appnative-hero__head h1{
  margin:0;
  font-size:clamp(38px, 5vw, 58px);
  line-height:1.06;
  background:
    linear-gradient(90deg,
      #ff168b 0%,
      #a855f7 34%,
      #3b82f6 68%,
      #ff168b 100%
    );
  background-size:220% 100%;
  animation:appnativeTitleSweep 12s linear infinite;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

body[data-page="offres/applications-natives"] .appnative-hero__lead{
  margin:0;
  max-width:840px;
  color:var(--appnative-muted);
  font-size:clamp(1rem, 1.6vw, 1.18rem);
  line-height:1.55;
}

@keyframes appnativeTitleSweep{
  from{ background-position:0% 50%; }
  to{ background-position:-220% 50%; }
}

body[data-page="offres/applications-natives"] .appnative-hero__visual{
  display:flex;
  justify-content:center;
  margin:0 auto 24px;
}

body[data-page="offres/applications-natives"] .appnative-device-float{
  width:min(100%, 920px);
  max-width:100%;
  height:auto;
  opacity:0;
  transform:translateY(30px);
  transition:opacity .95s ease, transform .95s cubic-bezier(.22,.61,.36,1);
  filter:drop-shadow(0 28px 56px rgba(15,23,42,.18));
}

body[data-page="offres/applications-natives"] .appnative-device-float.is-in{
  opacity:1;
  transform:none;
}

body[data-page="offres/applications-natives"] .appnative-intro{
  text-align:center;
  max-width:900px;
  margin:0 auto;
}

body[data-page="offres/applications-natives"] .appnative-intro h2{
  margin:0 auto 16px;
  max-width:760px;
  font-size:clamp(28px, 4vw, 42px);
  line-height:1.08;
  letter-spacing:-.02em;
}

body[data-page="offres/applications-natives"] .appnative-intro p{
  max-width:760px;
  margin:0 auto 14px;
  color:var(--appnative-muted);
  font-size:1.04rem;
  line-height:1.7;
}

/* FAMILIES */
body[data-page="offres/applications-natives"] .appnative-families{
  padding:30px 0 20px;
}

body[data-page="offres/applications-natives"] .appnative-families__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:24px;
}

body[data-page="offres/applications-natives"] .appnative-family-card{
  position:relative;
  min-width:0;
  border-radius:24px;
  border:1px solid rgba(15,23,42,.06);
  box-shadow:0 16px 34px rgba(16,24,40,.08), inset 0 1px 0 rgba(255,255,255,.65);
  padding:22px;
  background-clip:padding-box;
  transition:transform .25s ease, box-shadow .25s ease;
  overflow:hidden;
}

body[data-page="offres/applications-natives"] .appnative-family-card.tone--a{
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
}

body[data-page="offres/applications-natives"] .appnative-family-card.tone--b{
  background:linear-gradient(180deg, #FCFEFF, rgba(252,254,255,.84));
}

body[data-page="offres/applications-natives"] .appnative-family-card:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 46px rgba(16,24,40,.12), inset 0 1px 0 rgba(255,255,255,.72);
}

body[data-page="offres/applications-natives"] .appnative-family-card h2{
  margin:0 0 14px;
  font-size:clamp(22px, 2.2vw, 28px);
  line-height:1.1;
}

body[data-page="offres/applications-natives"] .appnative-family-card__media{
  margin:0 0 14px;
  padding:18px;
  border-radius:16px;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,255,255,.26) 0%,
      rgba(255,255,255,.14) 42%,
      rgba(255,255,255,.04) 100%);
  overflow:hidden;
}

body[data-page="offres/applications-natives"] .appnative-family-card__media img{
  display:block;
  width:min(100%, 460px);
  max-width:100%;
  height:auto;
  margin:0 auto;
  opacity:0;
  transform:translateY(18px);
  transition:opacity .85s ease, transform .85s cubic-bezier(.22,.61,.36,1);
  filter:drop-shadow(0 18px 42px rgba(15,23,42,.14));
}

body[data-page="offres/applications-natives"] .appnative-family-card__media img.is-in{
  opacity:1;
  transform:none;
}

body[data-page="offres/applications-natives"] .appnative-family-card__text p{
  margin:.6rem 0;
  color:var(--appnative-muted);
  line-height:1.68;
}

body[data-page="offres/applications-natives"] .appnative-family-card__text p strong{
  color:var(--appnative-ink);
}

/* FOUNDATIONS */
body[data-page="offres/applications-natives"] .appnative-foundations{
  padding:58px 0 20px;
}

body[data-page="offres/applications-natives"] .appnative-foundations__head{
  text-align:center;
  max-width:860px;
  margin:0 auto 44px;
}

body[data-page="offres/applications-natives"] .appnative-foundations__head h2{
  margin:0 0 12px;
  font-size:clamp(30px, 4vw, 44px);
  line-height:1.08;
}

body[data-page="offres/applications-natives"] .appnative-foundations__head p{
  margin:.45rem auto;
  max-width:760px;
  color:var(--appnative-muted);
}

body[data-page="offres/applications-natives"] .appnative-foundations__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:22px;
}

body[data-page="offres/applications-natives"] .appnative-foundation-card{
  position:relative;
  min-width:0;
  width:100%;
  max-width:340px;
  margin:auto;
  aspect-ratio:2 / 3;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:0;
  overflow:hidden;
  border-radius:22px;
  background:#fff;
  box-shadow:0 14px 32px rgba(0,0,0,.10);
  transition:transform .28s ease, box-shadow .28s ease;
}

body[data-page="offres/applications-natives"] .appnative-foundation-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 50px rgba(0,0,0,.16);
}

body[data-page="offres/applications-natives"] .appnative-foundation-card__media{
  position:relative;
  width:100%;
  height:62%;
  z-index:0;
}

body[data-page="offres/applications-natives"] .appnative-foundation-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

body[data-page="offres/applications-natives"] .appnative-foundation-card__body{
  position:relative;
  z-index:1;
  margin-top:auto;
  padding:16px 16px 18px;
  background:#fff;
}

body[data-page="offres/applications-natives"] .appnative-foundation-card__body h3{
  margin:0 0 6px;
  font-size:.88rem;
  text-transform:uppercase;
  letter-spacing:.04em;
}

body[data-page="offres/applications-natives"] .appnative-foundation-card__body .headline{
  margin:0 44px 8px 0;
  color:#111;
  font-size:1.02rem;
  font-weight:800;
  line-height:1.15;
}

body[data-page="offres/applications-natives"] .appnative-foundation-card__body .sub{
  margin:0;
  color:var(--appnative-muted);
  font-size:.98rem;
  line-height:1.35;
}

body[data-page="offres/applications-natives"] .appnative-foundation-card__plus{
  position:absolute;
  top:12px;
  right:12px;
  z-index:5;
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.95);
  color:#0f172a;
  font-weight:700;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.16);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}

body[data-page="offres/applications-natives"] .appnative-foundation-card__plus:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(0,0,0,.20);
}

/* STORES BAND + PM BAND */
body[data-page="offres/applications-natives"] .appnative-stores-band,
body[data-page="offres/applications-natives"] .appnative-pm-band{
  padding:26px 0 0;
}

body[data-page="offres/applications-natives"] .appnative-stores-card,
body[data-page="offres/applications-natives"] .appnative-pm-card{
  position:relative;
  border-radius:26px;
  padding:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.74));
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 24px 70px rgba(15,23,42,.10);
  overflow:hidden;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

body[data-page="offres/applications-natives"] .appnative-stores-card::before,
body[data-page="offres/applications-natives"] .appnative-pm-card::before{
  content:"";
  position:absolute;
  inset:-220px -180px auto -180px;
  height:520px;
  pointer-events:none;
  background:
    radial-gradient(50% 60% at 35% 40%, rgba(18,179,255,.18), transparent 70%),
    radial-gradient(45% 55% at 70% 35%, rgba(124,140,255,.16), transparent 72%),
    radial-gradient(55% 70% at 60% 75%, rgba(255,93,122,.12), transparent 70%);
  filter:blur(26px) saturate(140%);
  opacity:.95;
}

body[data-page="offres/applications-natives"] .appnative-stores-card__top,
body[data-page="offres/applications-natives"] .appnative-stores-card__grid,
body[data-page="offres/applications-natives"] .appnative-stores-card__bottom,
body[data-page="offres/applications-natives"] .appnative-pm-card__top,
body[data-page="offres/applications-natives"] .appnative-pm-card__grid,
body[data-page="offres/applications-natives"] .appnative-pm-card__bottom{
  position:relative;
  z-index:1;
}

body[data-page="offres/applications-natives"] .kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0 0 10px;
  font-size:.86rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:color-mix(in oklab, var(--appnative-muted), #000 12%);
}

body[data-page="offres/applications-natives"] .dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(18,179,255,1), rgba(124,140,255,1), rgba(255,93,122,1));
  box-shadow:0 8px 20px rgba(18,179,255,.18);
}

body[data-page="offres/applications-natives"] .appnative-stores-card h2,
body[data-page="offres/applications-natives"] .appnative-pm-card h2{
  margin:0 0 10px;
  font-size:clamp(22px, 2.2vw, 30px);
  line-height:1.1;
}

body[data-page="offres/applications-natives"] .lead{
  margin:0 0 16px;
  max-width:78ch;
  color:var(--appnative-muted);
  line-height:1.65;
}

body[data-page="offres/applications-natives"] .appnative-stores-card__grid,
body[data-page="offres/applications-natives"] .appnative-pm-card__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
  margin-top:12px;
}

body[data-page="offres/applications-natives"] .store-block,
body[data-page="offres/applications-natives"] .pm-block{
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.72));
  border:1px solid rgba(15,23,42,.06);
  box-shadow:0 10px 26px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.65);
  padding:14px 14px 12px;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

body[data-page="offres/applications-natives"] .store-block:hover,
body[data-page="offres/applications-natives"] .pm-block:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 38px rgba(15,23,42,.09);
  border-color:rgba(15,23,42,.10);
}

body[data-page="offres/applications-natives"] .store-block h3,
body[data-page="offres/applications-natives"] .pm-block h3{
  margin:0 0 10px;
  font-size:1rem;
  font-weight:750;
  color:var(--appnative-ink);
  border-left:3px solid color-mix(in oklab, var(--appnative-brand) 30%, #12B3FF 70%);
  padding-left:10px;
}

body[data-page="offres/applications-natives"] .store-block ul,
body[data-page="offres/applications-natives"] .pm-block ul{
  margin:0;
  padding:0;
  list-style:none;
  color:var(--appnative-muted);
  line-height:1.55;
  font-size:.98rem;
}

body[data-page="offres/applications-natives"] .store-block li,
body[data-page="offres/applications-natives"] .pm-block li{
  position:relative;
  padding-left:22px;
  margin:8px 0;
}

body[data-page="offres/applications-natives"] .store-block li::before,
body[data-page="offres/applications-natives"] .pm-block li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:10px;
  height:10px;
  border-radius:999px;
  background:color-mix(in oklab, #12B3FF 55%, rgba(124,140,255,1));
  box-shadow:0 10px 22px rgba(18,179,255,.12);
}

body[data-page="offres/applications-natives"] .appnative-stores-card__bottom,
body[data-page="offres/applications-natives"] .appnative-pm-card__bottom{
  margin-top:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

body[data-page="offres/applications-natives"] .badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

body[data-page="offres/applications-natives"] .badge{
  display:inline-flex;
  align-items:center;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.72);
  color:color-mix(in oklab, var(--appnative-ink), #000 6%);
  font-size:.92rem;
  box-shadow:0 10px 22px rgba(15,23,42,.05);
}

body[data-page="offres/applications-natives"] .note{
  margin:0;
  max-width:58ch;
  color:color-mix(in oklab, var(--appnative-muted), #000 8%);
  line-height:1.6;
  font-size:.98rem;
}

/* MODAL */
body[data-page="offres/applications-natives"] .appnative-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:5000;
  padding:12px;
}

body[data-page="offres/applications-natives"] .appnative-modal[aria-hidden="false"]{
  display:block;
}

body[data-page="offres/applications-natives"] .appnative-modal__overlay{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.45);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

body[data-page="offres/applications-natives"] .appnative-modal__dialog{
  position:relative;
  width:min(920px, calc(100vw - 24px));
  max-width:calc(100vw - 24px);
  max-height:calc(100dvh - 24px);
  margin:0 auto;
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.86));
  border:1px solid rgba(0,0,0,.08);
  border-radius:22px;
  box-shadow:0 24px 64px rgba(0,0,0,.25);
  overflow:auto;
}

body[data-page="offres/applications-natives"] .appnative-modal__close{
  position:sticky;
  top:0;
  margin-left:auto;
  margin-right:6px;
  margin-top:6px;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  cursor:pointer;
  z-index:2;
}

body[data-page="offres/applications-natives"] .appnative-modal__content{
  padding:16px 18px 22px;
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

body[data-page="offres/applications-natives"] .appnative-modal__content > *{
  max-width:100%;
}

body[data-page="offres/applications-natives"] .appnative-modal__content h3{
  color:var(--appnative-accent, #12B3FF);
  margin:0 0 10px;
}

body[data-page="offres/applications-natives"] .appnative-modal__content h4{
  color:var(--appnative-accent, #12B3FF);
}

body[data-page="offres/applications-natives"] .appnative-detail-hero{
  margin:8px 0 18px;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(15,23,42,.12);
}

body[data-page="offres/applications-natives"] .appnative-detail-hero img{
  display:block;
  width:100%;
  height:auto;
}

body[data-page="offres/applications-natives"] .appnative-detail-hero figcaption{
  padding:8px 12px;
  font-size:.92rem;
  color:var(--appnative-muted);
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(247,249,252,.85));
  border-top:1px solid color-mix(in oklab, rgba(0,0,0,.08) 80%, transparent);
}

body[data-page="offres/applications-natives"] .appnative-detail-copy{
  margin:10px 0 14px;
  color:var(--appnative-muted);
  font-size:1rem;
  line-height:1.65;
}

body[data-page="offres/applications-natives"] .appnative-detail-copy p{
  margin:.55rem 0;
}

body[data-page="offres/applications-natives"] .appnative-detail-copy strong{
  color:var(--appnative-ink);
}

body[data-page="offres/applications-natives"] .appnative-detail-grid{
  display:flex;
  flex-direction:column;
  gap:12px;
  width:100%;
  max-width:100%;
}

body[data-page="offres/applications-natives"] .appnative-detail-grid article{
  width:100%;
  max-width:100%;
  min-width:0;
  background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.74));
  color:var(--appnative-muted);
  border:1px solid color-mix(in oklab, rgba(0,0,0,.08) 80%, transparent);
  border-radius:20px;
  box-shadow:0 0 0 1px rgba(255,255,255,.6) inset, 0 6px 20px rgba(15,23,42,.06);
  padding:16px 16px 14px;
}

body[data-page="offres/applications-natives"] .appnative-detail-grid article h4{
  color:var(--appnative-ink);
  font-weight:700;
  border-left:3px solid var(--appnative-accent, #12B3FF);
  padding-left:8px;
  margin:0 0 10px;
  font-size:16px;
}

body[data-page="offres/applications-natives"] .appnative-detail-grid article p{
  margin:0;
  color:var(--appnative-muted);
  line-height:1.5;
}

/* =========================================================
   APP RELEASE
   ========================================================= */
.app-release{
  padding:120px 0;
}

.release-hero{
  text-align:center;
  max-width:900px;
  margin:0 auto 80px;
}

.release-visual img{
  width:100%;
  max-width:720px;
  margin:0 auto 40px;
  display:block;
}

.release-title{
  font-size:clamp(32px,4vw,48px);
  margin:10px 0 20px;
}

.release-lead{
  font-size:18px;
  color:#444;
  line-height:1.6;
}

.release-lead--soft{
  margin-top:14px;
  color:#666;
}

.release-pipeline{
  --line-color: rgba(15,23,42,.14);
  --dot-size: 18px;
  --line-thickness: 2px;
  --step-gap: 28px;

  position:relative;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:24px;
  margin-top:42px;
  padding-top:38px;
}

.release-pipeline::before{
  content:"";
  position:absolute;
  left:calc(12.5% + var(--dot-size) / 2);
  right:calc(12.5% + var(--dot-size) / 2);
  top:calc(38px + (var(--dot-size) / 2) - (var(--line-thickness) / 2));
  height:var(--line-thickness);
  background:var(--line-color);
  border-radius:999px;
  z-index:0;
}

.release-step{
  position:relative;
  z-index:1;
  text-align:center;
  padding-top:calc(var(--dot-size) + var(--step-gap));
  min-width:0;

  opacity:0;
  transform:translateY(28px);
  filter:blur(8px);
  transition:
    opacity 1.15s ease,
    transform 1.15s cubic-bezier(.22,.61,.36,1),
    filter 1.15s ease;
}

.release-pipeline.is-visible .release-step{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}

.release-pipeline.is-visible .release-step:nth-child(1){ transition-delay:0ms; }
.release-pipeline.is-visible .release-step:nth-child(2){ transition-delay:260ms; }
.release-pipeline.is-visible .release-step:nth-child(3){ transition-delay:520ms; }
.release-pipeline.is-visible .release-step:nth-child(4){ transition-delay:780ms; }

.release-step::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:var(--dot-size);
  height:var(--dot-size);
  border-radius:50%;
  background:#0f172a;
  transform:translateX(-50%);
  box-shadow:
    0 0 0 8px rgba(255,255,255,.88),
    0 8px 20px rgba(15,23,42,.12);
}

.release-step h4{
  margin:0 0 12px;
  font-size:clamp(1.05rem, 1.8vw, 1.2rem);
  line-height:1.2;
}

.release-step p{
  margin:0;
  color:var(--muted, #5B6A7E);
  line-height:1.6;
  overflow-wrap:anywhere;
}

.release-stores{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:28px;
  margin-top:60px;
  align-items:stretch;
}

.store-card{
  min-width:0;
  padding:28px;
  border-radius:18px;
  background:rgba(255,255,255,0.6);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
  transition:transform .3s ease, box-shadow .3s ease;
}

.store-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 36px rgba(0,0,0,0.10);
}

.store-card h3{
  margin:0 0 12px;
  font-size:clamp(1.1rem, 2vw, 1.28rem);
  line-height:1.2;
}

.store-card ul{
  margin:0;
  padding-left:18px;
}

.store-card li{
  margin:0 0 10px;
  color:var(--muted, #5B6A7E);
  line-height:1.6;
  overflow-wrap:anywhere;
}

.release-foot{
  margin-top:42px;
  text-align:center;
}

.release-badges{
  display:flex;
  gap:10px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  margin:0 0 18px;
}

.release-badges span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  border-radius:999px;
  background:#f3f3f3;
  font-size:13px;
  line-height:1.2;
  white-space:normal;
}

.release-note{
  max-width:760px;
  margin:0 auto;
  text-align:center;
  color:#666;
  line-height:1.65;
  overflow-wrap:anywhere;
}

/* =========================================================
   APP OPS BAND
   ========================================================= */
.app-ops-band{
  position:relative;
  padding:clamp(72px, 9vw, 120px) 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0) 18%),
    linear-gradient(0deg, rgba(255,255,255,.62), rgba(255,255,255,.62));
  border-top:1px solid rgba(15,23,42,.06);
  border-bottom:1px solid rgba(15,23,42,.06);
  overflow:hidden;
}

.app-ops-band::before{
  content:"";
  position:absolute;
  inset:-180px auto auto 50%;
  width:min(1100px, 94vw);
  height:520px;
  transform:translateX(-50%);
  pointer-events:none;
  background:
    radial-gradient(40% 55% at 30% 40%, rgba(18,179,255,.14), transparent 70%),
    radial-gradient(38% 50% at 70% 35%, rgba(124,140,255,.14), transparent 72%),
    radial-gradient(42% 55% at 55% 78%, rgba(255,93,122,.10), transparent 72%);
  filter:blur(40px) saturate(140%);
  opacity:.9;
}

.app-ops-band .wrap{
  position:relative;
  z-index:1;
}

.app-ops-intro{
  max-width:860px;
  margin:0 auto clamp(28px, 4vw, 42px);
  text-align:center;
}

.app-ops-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0 0 12px;
  font-size:.86rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:color-mix(in oklab, var(--muted, #5B6A7E), #000 12%);
}

.app-ops-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(18,179,255,1), rgba(124,140,255,1), rgba(255,93,122,1));
  box-shadow:0 8px 20px rgba(18,179,255,.18);
  flex:0 0 auto;
}

.app-ops-title{
  margin:0 0 14px;
  font-size:clamp(28px, 4vw, 44px);
  line-height:1.08;
  letter-spacing:-.02em;
  color:var(--ink, #0F172A);
  text-wrap:balance;
}

.app-ops-lead{
  margin:0 auto;
  max-width:76ch;
  color:var(--muted, #5B6A7E);
  line-height:1.72;
  font-size:clamp(1rem, 1.35vw, 1.08rem);
}

.app-ops-stack{
  display:grid;
  gap:18px;
  max-width:1080px;
  margin:0 auto;
}

.app-ops-row{
  display:grid;
  grid-template-columns:minmax(180px, 240px) minmax(0, 1fr);
  gap:24px;
  align-items:start;
  padding:24px 24px 22px;
  border-radius:26px;
  background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.72));
  border:1px solid rgba(15,23,42,.08);
  box-shadow:
    0 18px 48px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.72);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease;
  min-width:0;
}

.app-ops-row:hover{
  transform:translateY(-3px);
  box-shadow:
    0 24px 56px rgba(15,23,42,.10),
    inset 0 1px 0 rgba(255,255,255,.78);
  border-color:rgba(15,23,42,.11);
}

.app-ops-row__head{
  min-width:0;
}

.app-ops-index{
  margin:0 0 10px;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.08em;
  color:color-mix(in oklab, var(--brand, #FF168B) 55%, #5B6A7E);
}

.app-ops-row__head h3{
  margin:0;
  font-size:clamp(1.2rem, 2vw, 1.55rem);
  line-height:1.15;
  color:var(--ink, #0F172A);
  overflow-wrap:anywhere;
}

.app-ops-row__body{
  min-width:0;
}

.app-ops-row__body > p{
  margin:0 0 14px;
  color:var(--ink, #0F172A);
  font-size:1.02rem;
  line-height:1.65;
  overflow-wrap:anywhere;
}

.app-ops-list{
  margin:0;
  padding:0;
  list-style:none;
  color:var(--muted, #5B6A7E);
}

.app-ops-list li{
  position:relative;
  padding-left:22px;
  margin:10px 0;
  line-height:1.62;
  overflow-wrap:anywhere;
}

.app-ops-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:9px;
  height:9px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(18,179,255,1), rgba(124,140,255,1));
  box-shadow:0 8px 18px rgba(18,179,255,.16);
}

.app-ops-foot{
  max-width:980px;
  margin:22px auto 0;
  text-align:center;
}

.app-ops-badges{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-bottom:16px;
}

.app-ops-badge{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.74);
  color:color-mix(in oklab, var(--ink, #0F172A), #000 6%);
  font-size:.92rem;
  box-shadow:0 10px 22px rgba(15,23,42,.05);
}

.app-ops-note{
  margin:0 auto;
  max-width:70ch;
  color:color-mix(in oklab, var(--muted, #5B6A7E), #000 8%);
  line-height:1.68;
  font-size:.98rem;
  overflow-wrap:anywhere;
}

/* =========================================================
   MIN-WIDTH SAFETY
   ========================================================= */
.hero-stack,
.hero-intro,
.web-duo,
.web-duo .duo,
.duo-card,
.duo-media,
.duo-text,
.portrait-grid,
.portrait-track,
.portrait-card,
.portrait-body,
.portrait-modal__dialog,
.portrait-modal__content,
.detail-copy,
.detail-grid,
.detail-grid article,
body[data-page="offres/applications-natives"] .appnative-hero__wrap,
body[data-page="offres/applications-natives"] .appnative-intro,
body[data-page="offres/applications-natives"] .appnative-families,
body[data-page="offres/applications-natives"] .appnative-families__grid,
body[data-page="offres/applications-natives"] .appnative-family-card,
body[data-page="offres/applications-natives"] .appnative-family-card__text,
body[data-page="offres/applications-natives"] .appnative-foundations__grid,
body[data-page="offres/applications-natives"] .appnative-foundation-card,
body[data-page="offres/applications-natives"] .appnative-foundation-card__body,
body[data-page="offres/applications-natives"] .appnative-stores-card__grid,
body[data-page="offres/applications-natives"] .appnative-pm-card__grid,
body[data-page="offres/applications-natives"] .appnative-modal__dialog,
body[data-page="offres/applications-natives"] .appnative-modal__content,
.release-stores,
.store-card,
.release-foot,
.release-badges,
.release-note{
  min-width:0;
}


.contact-form.was-submitted .input:invalid,
.contact-form.was-submitted .textarea:invalid,
.contact-form.was-submitted .consent input:invalid{
  border-color:rgba(239,68,68,.72);
  box-shadow:
    0 0 0 4px rgba(239,68,68,.12),
    0 14px 30px rgba(15,23,42,.08);
}

.contact-form.was-submitted .form-field:has(.input:invalid) label,
.contact-form.was-submitted .form-field:has(.textarea:invalid) label{
  color:#991B1B;
}

/* =========================================================
   RESPONSIVE — TOUT À LA FIN
   ========================================================= */

@media (min-width:861px){
  .burger{
    display:none;
  }

  .main-nav{
    display:block;
    position:static;
    padding:0;
    background:transparent;
    border:none;
    box-shadow:none;
  }

  .nav{
    display:flex;
    flex-direction:row;
    gap:26px;
  }
}

@media (max-width:1024px){
  .deliverables-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .offres-hero .grid{
    grid-template-columns:repeat(2,1fr);
  }

  .portrait-track.portrait-grid-track{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  body[data-page="offres/applications-natives"] .appnative-foundations__grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

@media (max-width:991px){
  .offres-hero .grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width:980px){
  .nav{
    display:none;
  }

  .burger{
    display:block;
  }

  .grid{
    grid-template-columns:1fr;
  }

  .web-duo .duo{
    grid-template-columns:1fr;
  }

  .pm-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  body[data-page="offres/applications-natives"] .appnative-families__grid{
    grid-template-columns:1fr;
  }

  body[data-page="offres/applications-natives"] .appnative-stores-card__grid,
  body[data-page="offres/applications-natives"] .appnative-pm-card__grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .release-stores{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:20px;
  }

  .app-ops-band{
    padding:64px 0;
  }

  .app-ops-title{
    font-size:clamp(26px, 5vw, 38px);
  }

  .app-ops-stack{
    gap:16px;
  }

  .app-ops-row{
    grid-template-columns:minmax(150px, 210px) minmax(0, 1fr);
    gap:18px;
    padding:22px 20px 20px;
    border-radius:24px;
  }

  .app-ops-row__body > p{
    font-size:1rem;
  }
}

@media (max-width:900px){
  .web-duo .duo{
    grid-template-columns:1fr;
  }
}

@media (max-width:860px){
  .main-nav{
    display:none;
  }

  .release-pipeline{
    grid-template-columns:1fr;
    gap:22px;
    padding-top:0;
    padding-left:34px;
    margin-top:28px;
  }

  .release-pipeline::before{
    left:8px;
    right:auto;
    top:8px;
    bottom:8px;
    width:2px;
    height:auto;
  }

  .release-step{
    text-align:left;
    padding-top:0;
    padding-left:26px;
  }

  .release-step::before{
    top:2px;
    left:0;
    transform:none;
    width:16px;
    height:16px;
    box-shadow:
      0 0 0 6px rgba(255,255,255,.88),
      0 8px 20px rgba(15,23,42,.10);
  }

  .app-ops-band{
    padding:56px 0;
  }

  .app-ops-intro{
    margin-bottom:24px;
  }

  .app-ops-title{
    font-size:clamp(24px, 7vw, 34px);
  }

  .app-ops-lead{
    font-size:1rem;
    line-height:1.65;
  }

  .app-ops-row{
    grid-template-columns:1fr;
    gap:14px;
    padding:20px 18px 18px;
    border-radius:22px;
  }

  .app-ops-row__head h3{
    font-size:1.28rem;
  }

  .app-ops-foot{
    margin-top:18px;
  }
}

@media (max-width:640px){
  .offres-hero .grid{
    grid-template-columns:1fr;
  }

  .deliverables-grid{
    grid-template-columns:1fr;
  }

  .portrait-track.portrait-grid-track{
    grid-template-columns:1fr;
  }

  .pm-grid{
    grid-template-columns:1fr;
  }

  .page-web-hero{
    padding-bottom:40px;
  }

  .hero-stack{
    padding-left:14px;
    padding-right:14px;
  }

  .web-hero-head.centered{
    gap:10px;
  }

  .web-hero-head h1{
    font-size:clamp(30px, 9vw, 42px);
  }

  .web-hero-head .lead{
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:break-word;
    font-size:1rem;
    line-height:1.5;
  }

  .hero-intro.center-intro .band-title{
    font-size:clamp(1.7rem, 7vw, 2.2rem);
    line-height:1.12;
    text-wrap:balance;
  }

  .hero-intro.center-intro p{
    font-size:1rem;
    line-height:1.6;
  }

  .web-duo{
    padding-top:18px;
    padding-bottom:30px;
  }

  .duo-card{
    padding:16px 14px;
    border-radius:18px;
  }

  .duo-card .band-title{
    font-size:clamp(1.45rem, 6vw, 2rem);
    line-height:1.12;
  }

  .duo-media{
    padding:8px;
    margin-bottom:10px;
  }

  .offer-illus{
    width:min(100%, 260px);
  }

  .laptop-float{
    width:min(100%, 420px);
  }

  .faq-q{
    padding:1rem 1rem;
  }

  body[data-page="offres/applications-natives"] .appnative-hero{
    padding:96px 0 36px;
  }

  body[data-page="offres/applications-natives"] .appnative-hero__head{
    gap:10px;
    margin-bottom:20px;
  }

  body[data-page="offres/applications-natives"] .appnative-hero__head h1{
    font-size:clamp(31px, 9vw, 44px);
  }

  body[data-page="offres/applications-natives"] .appnative-hero__lead{
    font-size:1rem;
    line-height:1.5;
  }

  body[data-page="offres/applications-natives"] .appnative-device-float{
    width:min(100%, 420px);
  }

  body[data-page="offres/applications-natives"] .appnative-intro h2{
    font-size:clamp(26px, 7vw, 34px);
    line-height:1.1;
  }

  body[data-page="offres/applications-natives"] .appnative-intro p{
    font-size:1rem;
    line-height:1.6;
  }

  body[data-page="offres/applications-natives"] .appnative-family-card{
    padding:16px 14px;
    border-radius:18px;
  }

  body[data-page="offres/applications-natives"] .appnative-family-card__media{
    padding:10px;
  }

  body[data-page="offres/applications-natives"] .appnative-family-card__media img{
    width:min(100%, 260px);
  }

  body[data-page="offres/applications-natives"] .appnative-foundations{
    padding-top:44px;
  }

  body[data-page="offres/applications-natives"] .appnative-foundations__grid{
    grid-template-columns:1fr;
  }

  body[data-page="offres/applications-natives"] .appnative-stores-card,
  body[data-page="offres/applications-natives"] .appnative-pm-card{
    padding:18px 16px;
    border-radius:22px;
  }

  body[data-page="offres/applications-natives"] .appnative-stores-card__grid,
  body[data-page="offres/applications-natives"] .appnative-pm-card__grid{
    grid-template-columns:1fr;
  }

  body[data-page="offres/applications-natives"] .appnative-modal{
    padding:10px;
  }

  body[data-page="offres/applications-natives"] .appnative-modal__dialog{
    width:calc(100vw - 20px);
    max-width:calc(100vw - 20px);
    max-height:calc(100dvh - 20px);
    border-radius:18px;
  }

  body[data-page="offres/applications-natives"] .appnative-modal__content{
    padding:12px 12px 16px;
  }

  body[data-page="offres/applications-natives"] .appnative-modal__close{
    width:38px;
    height:38px;
    margin-right:4px;
    margin-top:4px;
  }

  .portrait-modal{
    padding:10px;
  }

  .portrait-modal__dialog{
    width:calc(100vw - 20px);
    max-width:calc(100vw - 20px);
    max-height:calc(100dvh - 20px);
    border-radius:18px;
  }

  .portrait-modal__content{
    padding:12px 12px 16px;
  }

  .portrait-modal__close{
    width:38px;
    height:38px;
    margin-right:4px;
    margin-top:4px;
  }

  .release-stores{
    grid-template-columns:1fr;
    gap:16px;
    margin-top:36px;
  }

  .store-card{
    padding:18px 16px;
    border-radius:16px;
  }

  .store-card h3{
    font-size:1.08rem;
  }

  .store-card ul{
    padding-left:16px;
  }

  .store-card li{
    margin-bottom:8px;
    font-size:.98rem;
    line-height:1.55;
  }

  .release-foot{
    margin-top:28px;
  }

  .release-badges{
    gap:8px;
    margin-bottom:14px;
  }

  .release-badges span{
    padding:7px 12px;
    font-size:12px;
  }

  .release-note{
    font-size:.98rem;
    line-height:1.58;
    padding:0 4px;
  }

  .app-ops-band{
    padding:48px 0;
  }

  .app-ops-band::before{
    width:96vw;
    height:420px;
    top:-120px;
  }

  .app-ops-kicker{
    font-size:.8rem;
    gap:8px;
    margin-bottom:10px;
  }

  .app-ops-title{
    font-size:clamp(22px, 8vw, 30px);
    line-height:1.1;
  }

  .app-ops-lead{
    font-size:.98rem;
    line-height:1.6;
  }

  .app-ops-stack{
    gap:14px;
  }

  .app-ops-row{
    padding:18px 16px 16px;
    border-radius:20px;
  }

  .app-ops-index{
    margin-bottom:8px;
    font-size:.78rem;
  }

  .app-ops-row__head h3{
    font-size:1.15rem;
    line-height:1.2;
  }

  .app-ops-row__body > p{
    font-size:.98rem;
    line-height:1.58;
    margin-bottom:12px;
  }

  .app-ops-list li{
    margin:8px 0;
    line-height:1.56;
    font-size:.96rem;
  }

  .app-ops-badges{
    gap:8px;
    margin-bottom:14px;
  }

  .app-ops-badge{
    font-size:.88rem;
    padding:7px 10px;
  }

  .app-ops-note{
    font-size:.95rem;
    line-height:1.58;
  }
}

@media (max-width:560px){
  .portrait-card{
    max-width:320px;
  }
}

@media (max-width:430px){
  .wrap{
    padding-left:12px;
    padding-right:12px;
	margin-top: 25px;
  }

  .hero-stack{
    padding-left:12px;
    padding-right:12px;
  }

  .web-hero{
    padding-top:92px;
  }

  .laptop-float{
    width:min(100%, 300px);
  }

  .hero-intro.center-intro .band-title{
    font-size:clamp(1.55rem, 8vw, 2rem);
  }

  .hero-intro.center-intro p{
    font-size:.98rem;
  }

  .duo-card{
    padding:14px 12px;
  }

  .duo-media{
    padding:6px;
  }

  .offer-illus{
    width:min(100%, 230px);
  }

  .portrait-grid{
    padding:12px;
  }

  .portrait-modal{
    padding:8px;
  }

  .portrait-modal__dialog{
    width:calc(100vw - 16px);
    max-width:calc(100vw - 16px);
    max-height:calc(100dvh - 16px);
    border-radius:16px;
  }

  .portrait-modal__content{
    padding:10px 10px 14px;
  }

  .portrait-modal__content h3{
    font-size:1.65rem;
    line-height:1.15;
  }

  .portrait-modal__content p{
    font-size:.98rem;
    line-height:1.58;
  }

  .pm-card{
    padding:16px;
  }

  body[data-page="offres/applications-natives"] .wrap{
    padding-left:12px;
    padding-right:12px;
  }

  body[data-page="offres/applications-natives"] .appnative-device-float{
    width:min(100%, 300px);
  }

  body[data-page="offres/applications-natives"] .appnative-family-card{
    padding:14px 12px;
  }

  body[data-page="offres/applications-natives"] .appnative-family-card__media{
    padding:8px;
  }

  body[data-page="offres/applications-natives"] .appnative-family-card__media img{
    width:min(100%, 230px);
  }

  body[data-page="offres/applications-natives"] .appnative-modal{
    padding:8px;
  }

  body[data-page="offres/applications-natives"] .appnative-modal__dialog{
    width:calc(100vw - 16px);
    max-width:calc(100vw - 16px);
    max-height:calc(100dvh - 16px);
    border-radius:16px;
  }

  body[data-page="offres/applications-natives"] .appnative-modal__content{
    padding:10px 10px 14px;
  }

  body[data-page="offres/applications-natives"] .appnative-modal__content h3{
    font-size:1.55rem;
    line-height:1.15;
  }

  body[data-page="offres/applications-natives"] .appnative-modal__content p{
    font-size:.98rem;
    line-height:1.58;
  }

  .store-card{
    padding:16px 14px;
  }

  .release-badges{
    justify-content:flex-start;
  }

  .release-badges span{
    font-size:11.5px;
    padding:7px 10px;
  }

  .release-note{
    text-align:left;
  }

  .app-ops-row{
    padding:16px 14px 14px;
    border-radius:18px;
  }

  .app-ops-row__head h3{
    font-size:1.08rem;
  }

  .app-ops-row__body > p{
    font-size:.96rem;
  }

  .app-ops-list li{
    padding-left:20px;
    font-size:.94rem;
  }

  .app-ops-list li::before{
    width:8px;
    height:8px;
  }

  .app-ops-badges{
    justify-content:flex-start;
  }

  .app-ops-badge{
    font-size:.84rem;
    padding:7px 9px;
  }

  .app-ops-note{
    text-align:left;
    font-size:.94rem;
  }
}

@media (prefers-reduced-motion:reduce){
  .reveal{
    transition:none;
    opacity:1;
    transform:none;
    filter:none;
  }

  .web-hero-head h1,
  body[data-page="offres/applications-natives"] .appnative-hero__head h1{
    animation:none;
  }

  .offres-hero::before,
  .gracyl-hero::before,
  .gracyl-hero::after{
    animation:none;
  }

  .laptop-float,
  .offer-illus,
  body[data-page="offres/applications-natives"] .appnative-device-float,
  body[data-page="offres/applications-natives"] .appnative-family-card__media img{
    transition:none;
    opacity:1;
    transform:none;
    --lift:0px;
    --bob:0px;
  }

  .web-card{
    transition:transform .18s ease, box-shadow .18s ease;
  }

  .web-card::before{
    display:none;
  }

  .offres-hero .card{
    opacity:1;
    transform:none;
    filter:none;
    animation:none !important;
  }

  .app-ops-row{
    transition:none;
  }

  .app-ops-row:hover{
    transform:none;
  }
}

@media (prefers-reduced-transparency:reduce){
  .offres-hero .card{
    background:#fff;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}

@media (max-width:640px) and (prefers-reduced-transparency:no-preference){
  .offres-hero .card{
    backdrop-filter:saturate(130%) blur(10px);
    -webkit-backdrop-filter:saturate(130%) blur(10px);
  }
}

/* =========================================================
   CONTACT PAGE
   ========================================================= */

.contact-duo{
  padding-top:20px;
  padding-bottom:44px;
}

.contact-form-card,
.contact-info-card{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.contact-alert{
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.08);
  font-weight:600;
  line-height:1.5;
}

.contact-alert--success{
  background:linear-gradient(180deg, rgba(16,185,129,.10), rgba(16,185,129,.06));
  color:#065f46;
  border-color:rgba(16,185,129,.20);
}

.contact-alert--error{
  background:linear-gradient(180deg, rgba(239,68,68,.10), rgba(239,68,68,.06));
  color:#991b1b;
  border-color:rgba(239,68,68,.20);
}

.contact-form{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-top:4px;
}

.form-row{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
}

.form-field{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}

.form-field label{
  font-weight:700;
  color:var(--ink, #0F172A);
  font-size:.96rem;
}

.input,
.textarea{
  width:100%;
  min-width:0;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.82);
  color:var(--ink, #0F172A);
  padding:14px 14px;
  font:inherit;
  line-height:1.5;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.input::placeholder,
.textarea::placeholder{
  color:#7c8aa0;
}

.input:focus,
.textarea:focus{
  outline:none;
  border-color:rgba(255,22,139,.35);
  box-shadow:0 0 0 4px rgba(255,22,139,.08);
  background:rgba(255,255,255,.96);
}

.textarea{
  resize:vertical;
  min-height:180px;
}

.consent{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:var(--muted, #5B6A7E);
  line-height:1.55;
  font-size:.96rem;
}

.consent input{
  margin-top:3px;
  flex:0 0 auto;
}

.actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:4px;
}

.actions .note{
  color:var(--muted, #5B6A7E);
  font-size:.94rem;
  line-height:1.5;
}

.hp{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.contact-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
  color:var(--muted, #5B6A7E);
  line-height:1.65;
}

.contact-list li{
  padding:0;
}

.contact-list strong{
  color:var(--ink, #0F172A);
}

.contact-cta-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:6px;
}

.contact-mini-panels{
  display:grid;
  gap:12px;
  margin-top:8px;
}

.contact-mini-panel{
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.68));
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 10px 24px rgba(15,23,42,.05);
  padding:14px 14px 12px;
}

.contact-mini-panel h3{
  margin:0 0 8px;
  font-size:1rem;
  color:var(--ink, #0F172A);
}

.contact-mini-panel p{
  margin:0;
  color:var(--muted, #5B6A7E);
  line-height:1.6;
}

.contact-links{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:4px;
}

.contact-links .link,
.contact-list .link{
  text-decoration:none;
  border-bottom:1px solid rgba(15,23,42,.18);
  transition:border-color .2s ease, color .2s ease;
}

.contact-links .link:hover,
.contact-list .link:hover{
  color:var(--brand, #FF168B);
  border-color:rgba(255,22,139,.35);
}

@media (max-width:980px){
  .form-row{
    grid-template-columns:1fr;
  }
}

@media (max-width:640px){
  .contact-duo{
    padding-top:14px;
    padding-bottom:30px;
  }

  .contact-cta-row{
    flex-direction:column;
    align-items:stretch;
  }

  .contact-cta-row .btn{
    width:100%;
  }

  .actions{
    flex-direction:column;
    align-items:stretch;
  }

  .actions .btn{
    width:100%;
  }
}