/* ============================================================
   JOANNA DEMEURE - Section styles
   ============================================================ */

.section{ position: relative; padding-block: clamp(64px, 6.5vw, 104px); }
.section-head{ max-width: 900px; margin: 0; text-align: left; }
.section-title{
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(30px, 4.2vw, 54px); line-height: 1.0; letter-spacing: -.03em;
  margin-top: 18px; text-wrap: balance;
}
.section-title .accent{ color: var(--coral); font-style: italic; }
.section-rule{ width: 46px; height: 2px; background: var(--coral); margin: 26px 0 0; }

/* ============================================================
   LEVIERS (services)
   ============================================================ */
.levier-grid{
  margin-top: 64px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}
.levier{
  position: relative; padding: 38px 30px 34px;
  --lc: #2C5BE0;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1), filter .9s cubic-bezier(.16,1,.3,1), background .45s var(--ease);
  overflow: hidden;
}
.levier:nth-child(3n){ border-right: none; }
/* card is now a <button> - reset chrome, keep the grid borders */
.levier{ appearance: none; -webkit-appearance: none; border-top: 0; border-left: 0;
  background: transparent; font: inherit; color: inherit; text-align: left; width: 100%; cursor: pointer; }
.levier:nth-child(6n+1){ --lc: #2C5BE0; }
.levier:nth-child(6n+2){ --lc: #E8542B; }
.levier:nth-child(6n+3){ --lc: #16A06A; }
.levier:nth-child(6n+4){ --lc: #7A4FB0; }
.levier:nth-child(6n+5){ --lc: #E0902A; }
.levier:nth-child(6n+6){ --lc: #D63B7A; }
.levier::after{
  content:""; position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: var(--lc); transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.levier:hover{ background: color-mix(in srgb, var(--lc) 7%, var(--bg)); }
.levier:hover::after{ transform: scaleX(1); }
.levier:hover .levier-ico{ border-color: var(--lc); color: var(--lc); transform: translateY(-3px); }
.levier:hover h3{ color: var(--lc); }
.levier:hover .num{ color: var(--lc); }
.levier:hover .more{ color: var(--lc); }
.levier .num{
  position: absolute; top: 26px; right: 28px;
  font-family: var(--serif); font-size: 14px; color: var(--ink-faint);
}
.levier-ico{
  width: 50px; height: 50px; border-radius: 13px; border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--ink); background: #fff;
  transition: transform .5s var(--ease), background .4s, color .4s, border-color .4s;
}
.levier:hover .levier-ico{ transform: translateY(-3px); }
.levier-ico svg{ width: 24px; height: 24px; }
.levier h3{ font-size: 19px; font-weight: 700; letter-spacing: -.01em; margin-top: 22px; transition: color .35s; }
.levier p{ font-size: 14.5px; color: var(--ink-soft); margin-top: 10px; line-height: 1.55; }
.levier .num{ transition: color .35s; }
.levier .more{
  display: inline-flex; align-items: center; gap: 8px; margin-top: 20px;
  font-size: 13.5px; font-weight: 600; color: var(--ink); transition: color .35s;
}
.levier .more .arrow{ transition: transform .45s var(--ease); }
.levier:hover .more .arrow{ transform: translateX(5px); }
@media (max-width: 860px){ .levier-grid{ grid-template-columns: repeat(2,1fr); } .levier:nth-child(3n){ border-right: 1px solid var(--line); } .levier:nth-child(2n){ border-right: none; } }
@media (max-width: 540px){ .levier-grid{ grid-template-columns: 1fr; } .levier{ border-right: none !important; } }

/* ---- Leviers : exploration des exemples ---- */
.levier-stage{ position: relative; margin-top: 64px; }
.levier-stage .levier-grid{ margin-top: 0; }
.levier-grid.is-hidden{ display: none; }

.levier-detail{ border-top: 1px solid var(--line); animation: ldIn .5s var(--ease) both; }
@keyframes ldIn{ from{ opacity: 0; transform: translateY(14px); } to{ opacity: 1; transform: none; } }
.ld-bar{ display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 26px 0 4px; }
.ld-back{ display: inline-flex; align-items: center; gap: 9px; background: none; border: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); padding: 0; transition: gap .3s var(--ease); }
.ld-back svg{ width: 18px; height: 18px; transform: rotate(180deg); }
.ld-back:hover{ gap: 13px; color: var(--coral); }
.ld-eyebrow{ font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }

.ld-head{ display: flex; align-items: flex-start; gap: 18px; padding: 22px 0 30px; }
.ld-head .levier-ico{ flex: none; }
.ld-head h3{ font-family: var(--sans); font-size: clamp(22px,2.6vw,30px); font-weight: 700; letter-spacing: -.025em; }
.ld-head p{ font-size: 15.5px; color: var(--ink-soft); margin-top: 8px; line-height: 1.55; max-width: 60ch; }

.ld-gallery{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px,2vw,24px); }
.ld-shot{ margin: 0; }
.ld-shot image-slot{ display: block; width: 100%; height: clamp(190px, 19vw, 280px); border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-warm); }
.ld-shot figcaption{ margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--ink-soft);
  display: flex; align-items: center; gap: 8px; }
.ld-shot figcaption::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); flex: none; }

.ld-foot{ margin-top: clamp(30px,4vw,46px); padding-top: 28px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.ld-foot p{ font-size: clamp(16px,1.6vw,19px); font-weight: 600; color: var(--ink); }
@media (max-width: 860px){
  .ld-gallery{ grid-template-columns: 1fr 1fr; }
  .ld-foot{ flex-direction: column; align-items: flex-start; }
}
@media (max-width: 540px){ .ld-gallery{ grid-template-columns: 1fr; } }

/* ============================================================
   DIAGNOSTIC - sticky scroll
   ============================================================ */
.diag{ background: var(--bg-warm); position: relative; }
.diag-sticky{
  display: flex; flex-direction: column; justify-content: center;
  max-width: var(--maxw); margin: 0 auto; padding: clamp(64px,8vh,100px) var(--gut);
}
.diag-body{
  display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; gap: clamp(30px,5vw,80px);
}

/* progress header - makes the sticky behaviour obviously intentional */
.diag-progress{ margin-bottom: clamp(28px, 5vh, 56px); }
.diag-progress .dp-top{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.diag-progress .dp-count{ font-size: 13px; color: var(--ink-soft); letter-spacing: .02em; }
.diag-progress .dp-count b{ font-family: var(--serif); font-size: 18px; color: var(--coral); }
.dp-bar{ position: relative; height: 1px; background: var(--line); margin: 9px 0; }
.dp-bar > i{ position: absolute; left: 0; top: 0; display: block; height: 100%; background: var(--ink); width: 0; transition: width .3s var(--ease); }
.dp-node{ position: absolute; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--bg-warm); border: 1px solid var(--line); transform: translate(-50%,-50%); transition: background .4s var(--ease), border-color .4s var(--ease); }
.dp-node.done{ background: var(--ink); border-color: var(--ink); }
.dp-node:first-child{ transform: translate(0,-50%); }
.dp-node:last-child{ transform: translate(-100%,-50%); }

/* left: stepper - clickable */
.diag-steps{ display: flex; flex-direction: column; gap: 4px; }
.diag-step{
  position: relative; padding: 16px 14px 16px 30px; cursor: pointer;
  border: none; border-left: 2px solid var(--line);
  background: none; text-align: left; width: 100%; font: inherit; color: inherit;
  border-radius: 0 10px 10px 0;
  transition: border-color .5s, opacity .5s, background .3s var(--ease);
}
.diag-step:hover{ background: color-mix(in srgb, var(--coral) 7%, transparent); }
.diag-step:hover .st-name{ color: var(--ink); }
.diag-step:focus-visible{ outline: 2px solid var(--coral); outline-offset: 2px; }
.diag-step .st-idx{ font-family: var(--serif); font-size: 13px; color: var(--ink-faint); transition: color .5s; }
.diag-step .st-name{
  font-family: var(--serif); font-size: clamp(19px, 2.2vw, 28px); font-weight: 500;
  letter-spacing: -.01em; color: var(--ink-faint); transition: color .5s, transform .6s var(--ease);
  margin-top: 2px;
}
/* sous-titre discret : raconte déjà la transformation obtenue */
.diag-step .st-sub{
  font-size: 12.5px; line-height: 1.35; letter-spacing: .01em; color: var(--ink-faint);
  margin-top: 4px; opacity: .8; transition: color .5s, transform .6s var(--ease), opacity .5s;
}
.diag-step:hover .st-sub{ opacity: 1; }
.diag-step.passed{ border-color: color-mix(in srgb, var(--coral) 45%, var(--line)); }
.diag-step.passed .st-name, .diag-step.passed .st-idx, .diag-step.passed .st-sub{ color: var(--ink-soft); }
.diag-step.active{ border-color: var(--coral); }
.diag-step.active .st-name{ color: var(--ink); transform: translateX(6px); }
.diag-step.active .st-sub{ color: var(--ink-soft); opacity: 1; transform: translateX(6px); }
.diag-step.active .st-idx{ color: var(--coral); }
.diag-step .st-fill{ position: absolute; left: -2px; top: 0; width: 2px; height: 0; background: var(--coral); transition: height .12s linear; }

/* hint */
.diag-hint{
  margin-top: clamp(28px, 5vh, 52px);
  display: inline-flex; align-self: center; align-items: center; gap: 9px;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--coral);
  font-weight: 600;
}
.diag-hint svg{ width: 16px; height: 16px; }

/* right: scanner readout card */
.diag-card{
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: 18px; padding: 30px 44px 38px; min-height: 420px;
  box-shadow: 0 40px 90px -50px rgba(0,0,0,.4);
  overflow: hidden;
}
.diag-card .scan-corner{ position: absolute; width: 16px; height: 16px; border: 2px solid var(--coral); opacity:.7; }
.diag-card .scan-corner.tl{ top: 18px; left: 18px; border-right: none; border-bottom: none; }
.diag-card .scan-corner.tr{ top: 18px; right: 18px; border-left: none; border-bottom: none; }
.diag-card .scan-corner.bl{ bottom: 18px; left: 18px; border-right: none; border-top: none; }
.diag-card .scan-corner.br{ bottom: 18px; right: 18px; border-left: none; border-top: none; }
.diag-readout{ display: flex; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
.diag-readout .dot{ display: inline-flex; align-items: center; gap: 7px; }
.diag-readout .dot::before{ content:""; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px var(--coral-glow); animation: pulse 1.6s infinite; }
@keyframes pulse{ 0%,100%{ opacity: 1; } 50%{ opacity: .35; } }

.diag-panel{ position: relative; }
.diag-state{ position: absolute; inset: 0; opacity: 0; transform: translateX(28px); filter: blur(4px); transition: opacity .45s var(--ease), transform .55s var(--ease), filter .45s var(--ease); pointer-events: none; }
.diag-state.on{ position: relative; opacity: 1; transform: none; filter: blur(0); pointer-events: auto; }
.diag-state .ds-ico{ width: 60px; height: 60px; border-radius: 16px; background: var(--coral-tint); color: var(--coral-deep); display: grid; place-items: center; margin: 2px 0 22px; }
.diag-state .ds-ico svg{ width: 31px; height: 31px; }
.diag-state h3{ font-family: var(--sans); font-size: clamp(25px,2.9vw,35px); font-weight: 700; letter-spacing: -.028em; line-height: 1.1; }
.diag-state p{ color: var(--ink-soft); font-size: 16px; margin-top: 16px; max-width: 46ch; line-height: 1.62; }
/* badges = leviers activés (sobres, pastille corail, moins « techniques ») */
/* Tags = leviers mobilisés. Chips sobres façon SaaS premium (texte bleu marine,
   fond très clair, fine bordure, coins doux), sur 2 colonnes. Pas de puce verte,
   pas d'effet bouton : de simples étiquettes, le vert de marque seulement au survol. */
.diag-state ul{
  list-style: none; margin-top: clamp(20px,2.4vw,26px); padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.diag-state li{
  display: flex; align-items: center; gap: 10px;
  padding: 11px 15px; border-radius: 12px;
  background: #f6f6f7; border: 1px solid #e7e7ea;
  color: #1e2a47; font-size: 13px; font-weight: 500; line-height: 1.1;
  letter-spacing: .005em; white-space: nowrap; cursor: default;
}
.diag-state .tag-ico{ display: grid; place-items: center; flex: none; color: var(--coral); }
.diag-state .tag-ico svg{ width: 18px; height: 18px; }
/* Survol : légère élévation + bordure teintée du vert de marque (parcimonie) */
.diag-state.on li:hover{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--coral) 42%, #e7e7ea);
  box-shadow: 0 6px 14px -8px rgba(20,25,40,.26);
}
@media (max-width: 560px){
  .diag-state ul{ grid-template-columns: 1fr; }
}
/* plus d'air entre les leviers et le bouton */
.diag-state .ds-cta{ margin-top: 34px; }

/* apparition en cascade : icône → titre → texte → badges → bouton (en dernier) */
.diag-state .ds-ico,
.diag-state h3,
.diag-state p,
.diag-state li,
.diag-state .ds-cta{ opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .3s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); }
.diag-state.on .ds-ico,
.diag-state.on h3,
.diag-state.on p,
.diag-state.on li,
.diag-state.on .ds-cta{ opacity: 1; transform: none; }
.diag-state.on .ds-ico{ transition-delay: .04s; }
.diag-state.on h3{ transition-delay: .11s; }
.diag-state.on p{ transition-delay: .18s; }
.diag-state.on li{ transition-delay: .26s; }
.diag-state.on li:nth-child(2){ transition-delay: .32s; }
.diag-state.on li:nth-child(3){ transition-delay: .38s; }
.diag-state.on li:nth-child(4){ transition-delay: .44s; }
.diag-state.on .ds-cta{ transition-delay: .56s; }
@media (prefers-reduced-motion: reduce){
  .diag-state .ds-ico,
  .diag-state h3,
  .diag-state p,
  .diag-state li,
  .diag-state .ds-cta{ transition: none; opacity: 1; transform: none; }
}
.diag-meter{ margin-top: 26px; }
.diag-meter .mrow{ display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-soft); margin-bottom: 8px; }
.diag-meter .mbar{ height: 6px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.diag-meter .mbar i{ display: block; height: 100%; background: var(--coral); border-radius: 999px; width: 0; transition: width 1s var(--ease); }
@media (max-width: 900px){
  .diag-body{ grid-template-columns: 1fr; gap: 34px; }
  .diag-sticky{ min-height: 100svh; padding-block: 80px; }
  .diag-card{ min-height: 340px; }
  .diag-cue{ bottom: 16px; }
}

/* ============================================================
   RÉALISATIONS
   ============================================================ */
.real-grid{ margin-top: 70px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,70px); }
.real{ display: flex; flex-direction: column; }
.real-media{
  position: relative; border-radius: 16px; overflow: hidden; background: var(--bg-warm);
  border: 1px solid var(--line); aspect-ratio: 4/3;
}
.real-media image-slot{ width: 100%; height: 100%; }
.real-tag{ margin-top: 26px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--coral); }
.real h3{ font-family: var(--sans); font-size: clamp(24px,2.6vw,32px); font-weight: 700; margin-top: 10px; letter-spacing: -.025em; }
.real p{ color: var(--ink-soft); font-size: 15.5px; margin-top: 12px; line-height: 1.6; max-width: 42ch; }
.real .more{ display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 14px; font-weight: 600; color: var(--coral); width: fit-content; }
.real .more .arrow{ transition: transform .45s var(--ease); }
.real:hover .more .arrow{ transform: translateX(5px); }
@media (max-width: 760px){ .real-grid{ grid-template-columns: 1fr; gap: 50px; } }

/* ============================================================
   POURQUOI
   ============================================================ */
.why{ background: var(--bg-warm); }
.why-grid{ margin-top: 60px; display: grid; grid-template-columns: repeat(3,1fr); gap: 0; }
.why-col{ padding: 0 34px; border-left: 1px solid var(--line); }
.why-col:first-child{ border-left: none; padding-left: 0; }
.why-col .qn{ font-family: var(--serif); font-size: 40px; color: var(--coral-tint); line-height: 1; }
.why-col h3{ font-size: 18px; font-weight: 700; margin-top: 8px; }
.why-col p{ color: var(--ink-soft); font-size: 15px; margin-top: 14px; line-height: 1.6; }
@media (max-width: 760px){ .why-grid{ grid-template-columns: 1fr; gap: 36px; } .why-col{ border-left: none; padding: 0; } }

/* ============================================================
   CTA
   ============================================================ */
.cta-wrap{ padding-block: clamp(64px,6.5vw,100px); }
.cta{
  position: relative; overflow: hidden;
  background: var(--ink); color: #fff; border-radius: 26px;
  padding: clamp(48px,7vw,90px); text-align: center;
}
.cta::before{
  content:""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 120%, var(--coral), transparent 55%);
  opacity: .5;
}
.cta .scan-corner{ position: absolute; width: 22px; height: 22px; border: 2px solid rgba(255,255,255,.4); }
.cta .scan-corner.tl{ top: 26px; left: 26px; border-right: none; border-bottom: none; }
.cta .scan-corner.tr{ top: 26px; right: 26px; border-left: none; border-bottom: none; }
.cta .scan-corner.bl{ bottom: 26px; left: 26px; border-right: none; border-top: none; }
.cta .scan-corner.br{ bottom: 26px; right: 26px; border-left: none; border-top: none; }
.cta-inner{ position: relative; z-index: 2; }
/* Apple-style staggered rise of the inner content */
.cta-inner > *{ opacity: 0; transform: translateY(30px); filter: blur(6px); transition: opacity .85s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1), filter .85s cubic-bezier(.16,1,.3,1); }
.cta.is-in .cta-inner > *{ opacity: 1; transform: none; filter: blur(0); }
.cta.is-in .cta-inner > *:nth-child(1){ transition-delay: .12s; }
.cta.is-in .cta-inner > *:nth-child(2){ transition-delay: .22s; }
.cta.is-in .cta-inner > *:nth-child(3){ transition-delay: .32s; }
.cta.is-in .cta-inner > *:nth-child(4){ transition-delay: .42s; }
@media (prefers-reduced-motion: reduce){
  .cta-inner > *{ transition: opacity .4s ease; transform: none !important; filter: none !important; }
}
.cta h2{ font-family: var(--sans); font-weight: 800; font-size: clamp(30px,4.4vw,58px); line-height: .98; letter-spacing: -.035em; text-wrap: balance; }
.cta h2 .accent{ color: var(--coral-tint); font-style: italic; }
.cta p{ color: rgba(255,255,255,.7); font-size: 17px; margin: 22px auto 0; max-width: 44ch; }
.cta .btn-primary{ margin-top: 36px; background: #fff; color: var(--ink); }
.cta .btn-primary:hover{ background: var(--coral-tint); }
.cta-reassure{ list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; margin-top: 26px; }
.cta-reassure li{ display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: rgba(255,255,255,.75); }
.cta-reassure li svg{ width: 16px; height: 16px; color: var(--coral-tint); flex: none; }
.cta-hand{ display: inline-flex; align-items: center; gap: .4em; font-size: clamp(22px,2.4vw,30px); color: var(--coral-tint); transform: rotate(-2deg); }
.cta-hand .cta-spark{ width: 26px; height: 26px; color: var(--gold-tint); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ padding: clamp(60px,8vw,96px) 0 40px; border-top: 1px solid var(--line); }
.footer-grid{ display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 40px; }
.footer .brand .name{ font-size: 22px; }
.footer-sign{ margin-bottom: 4px; }
.footer-sign .sig-name{ font-size: 40px; }
.footer-sign .sig-sub{ font-size: 20px; }
.footer-brand{ display: inline-block; }
.footer-about{ color: var(--ink-soft); font-size: 14.5px; margin-top: 14px; max-width: 30ch; line-height: 1.6; }
.footer-social{ display: flex; gap: 12px; margin-top: 24px; }
.footer-social a{ width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-soft); transition: all .35s var(--ease); }
.footer-social a:hover{ border-color: var(--coral); color: var(--coral); transform: translateY(-2px); }
.footer-col h4{ font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 18px; }
.footer-col ul{ list-style: none; display: flex; flex-direction: column; gap: 11px; }
.footer-col a{ font-size: 14.5px; color: var(--ink-soft); transition: color .3s; }
.footer-col a:hover{ color: var(--coral); }
.footer-col a.btn-primary, .footer-col a.btn-primary:hover{ color: #fff; font-size: 15px; }
.footer-col p{ font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; }
.footer-bottom{ margin-top: 60px; padding-top: 26px; border-top: 1px solid var(--line); text-align: center; font-size: 13px; color: var(--ink-faint); }
@media (max-width: 820px){ .footer-grid{ grid-template-columns: 1fr 1fr; gap: 36px; } }
@media (max-width: 480px){ .footer-grid{ grid-template-columns: 1fr; } }

/* ============================================================
   TWEAKS-driven
   ============================================================ */
[data-bg="pure"]{ --bg: #FFFFFF; --bg-warm: #F6F6F5; --line: #ECEAE8; --line-soft: #F3F2F1; }