/* ═══════════ Pages Consultant IA par ville : motion design ═══════════
   Gabarit commun aux 10 villes. État final par défaut (sans JS,
   reduced-motion). Boucles en transform/opacity, jouées à l'écran. */

/* ── Héros ── */
.ci-hero__grid{position:relative;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(30px,5vw,72px);align-items:center}
.ci-title{font-size:clamp(34px,4.1vw,62px);line-height:1.06}
.ci-hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,3.5vh,32px)}
.ci-rate{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:8px 14px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--muted-2);font-size:13.5px;text-decoration:none;transition:border-color 0.3s var(--ease)}
.ci-rate:hover{border-color:var(--yellow)}
.ci-rate__stars{color:var(--yellow);letter-spacing:1px}
.ci-rate b{font-family:var(--font-display);color:var(--text)}

/* Le radar */
.ci-radar-wrap{margin:0;justify-self:center;width:100%;max-width:440px}
.ci-radar-wrap figcaption{margin-top:14px;text-align:center;font-size:13px;color:var(--muted)}
.ci-radar{position:relative;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(250,181,18,0.06),transparent 70%)}
.ci-radar__ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,0.1)}
.ci-radar__ring--2{inset:16%;border-color:rgba(255,255,255,0.08)}
.ci-radar__ring--3{inset:32%;border-color:rgba(250,181,18,0.25);border-style:dashed}
.ci-radar__sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(250,181,18,0.32),rgba(250,181,18,0) 60deg,transparent 360deg);opacity:0.7}
.ci-radar__center{position:absolute;left:50%;top:50%;display:flex;flex-direction:column;align-items:center;transform:translate(-50%,-50%);z-index:2}
.ci-radar__center i{width:16px;height:16px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 6px rgba(250,181,18,0.18)}
.ci-radar__center b{margin-top:8px;padding:4px 10px;border-radius:999px;background:#141414;border:1px solid rgba(250,181,18,0.5);font-family:var(--font-display);font-size:14px;color:var(--yellow);white-space:nowrap}
.ci-orbit{position:absolute;inset:0}
.ci-sat{position:absolute;inset:20%;transform:rotate(var(--a));pointer-events:none}
.ci-orbit--2 .ci-sat{inset:8%}
.ci-sat__fix{position:absolute;left:50%;top:0;transform:translate(-50%,-50%) rotate(calc(-1 * var(--a)))}
.ci-sat__in{display:flex;flex-direction:column;align-items:center;gap:5px}
.ci-sat__in i{width:10px;height:10px;border-radius:50%;background:var(--text);box-shadow:0 0 0 4px rgba(245,243,239,0.1)}
.ci-sat__in em{padding:2px 8px;border-radius:999px;background:rgba(10,10,10,0.75);font-style:normal;font-size:12px;font-weight:500;color:var(--muted-2);white-space:nowrap}

/* ── Texte local ── */
.ci-local{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(30px,5vw,80px);align-items:start}
.ci-local__head{position:sticky;top:110px}
.ci-local__body p{margin:0 0 18px;font-size:16.5px;line-height:1.75;color:var(--muted-2)}
.ci-local__body p:first-child{font-family:var(--font-display);font-weight:500;font-size:clamp(19px,1.8vw,23px);line-height:1.5;letter-spacing:-0.01em;color:var(--text)}
.ci-chips{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ci-chips li{padding:8px 14px;border-radius:999px;border:1px solid var(--border);background:var(--surface);font-size:13.5px;color:var(--text)}
.ci-chips li:first-child{border-color:rgba(250,181,18,0.5)}

/* ── Cas d'usage ── */
.ci-cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,22px)}
.ci-case{display:flex;flex-direction:column;padding:clamp(24px,2.8vw,34px);border-radius:20px;border:1px solid var(--border);background:var(--surface);transition:border-color 0.35s var(--ease)}
.ci-case:hover{border-color:#3a3a3a}
.ci-case__sector{display:flex;align-items:baseline;gap:12px;margin:0 0 18px;font-size:clamp(19px,1.7vw,23px);letter-spacing:-0.02em;line-height:1.25}
.ci-case__sector span{font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:0.12em;color:var(--yellow)}
.ci-case p{margin:0;font-size:15px;line-height:1.6}
.ci-case p b{display:block;margin-bottom:4px;font-size:11.5px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase}
.ci-case__pain{color:var(--muted-2)}
.ci-case__pain b{color:var(--muted)}
.ci-case__arrow{position:relative;display:block;width:2px;height:30px;margin:12px 0 12px 6px;background:var(--yellow);transform-origin:50% 0}
.ci-case__arrow::after{content:"";position:absolute;left:-4px;bottom:-2px;width:8px;height:8px;border:solid var(--yellow);border-width:0 2px 2px 0;transform:rotate(45deg)}
.ci-case__gain{padding:14px 16px;border-radius:12px;background:rgba(250,181,18,0.07);border:1px solid rgba(250,181,18,0.3);color:var(--text)}
.ci-case__gain b{color:var(--yellow)}

/* ── Escalier des offres ── */
.ci-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:end;position:relative}
.ci-steps::before{content:"";position:absolute;left:4%;right:4%;bottom:-18px;height:2px;background:linear-gradient(90deg,rgba(250,181,18,0.2),var(--yellow));transform-origin:0 50%}
.ci-step a{position:relative;display:flex;flex-direction:column;min-height:calc(230px + var(--k) * 34px);padding:24px 22px;border-radius:18px;border:1px solid var(--border);background:var(--surface);text-decoration:none;transition:border-color 0.35s var(--ease),transform 0.35s var(--ease)}
.ci-step a:hover{border-color:var(--yellow);transform:translateY(-5px)}
.ci-step a:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.ci-step:nth-child(2) a{border-color:rgba(250,181,18,0.55)}
.ci-step__badge{position:absolute;top:-1px;right:18px;padding:5px 11px;border-radius:0 0 8px 8px;background:var(--yellow);color:#141414;font-size:10.5px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase}
.ci-step__n{font-family:var(--font-mono);font-size:12px;letter-spacing:0.14em;color:var(--yellow)}
.ci-step__t{margin:10px 0 6px;font-family:var(--font-display);font-weight:700;font-size:21px;letter-spacing:-0.02em;color:var(--text)}
.ci-step__p{font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--yellow)}
.ci-step__d{margin-top:12px;font-size:14px;line-height:1.55;color:var(--muted-2)}
.ci-step__go{margin-top:auto;padding-top:16px;color:var(--yellow);transition:transform 0.3s var(--ease)}
.ci-step a:hover .ci-step__go{transform:translateX(5px)}

/* ── Maillage ── */
.ci-net{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,56px);align-items:start}
.ci-cities__h{margin:0 0 14px;font-size:13px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);font-family:var(--font-body,inherit)}
.ci-cities ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ci-cities a{display:inline-flex;padding:9px 14px;border-radius:999px;border:1px solid var(--border);background:var(--surface);font-size:14px;color:var(--text);text-decoration:none;transition:border-color 0.3s var(--ease),color 0.3s var(--ease)}
.ci-cities a:hover{border-color:var(--yellow);color:var(--yellow)}
.ci-cities__odoo{margin:16px 0 0;font-size:14.5px;color:var(--muted-2)}
.ci-cities__odoo a{display:inline;padding:0;border:0;background:none;color:var(--yellow);font-weight:600}

/* ── Animations ── */
@media (prefers-reduced-motion:no-preference){
  .ci-in{opacity:0;transform:translateY(16px);animation:ciIn 0.7s var(--ease) var(--d,0s) forwards}
  .ci-radar__sweep{animation:ciSweep 5s linear infinite}
  .ci-radar__center i{animation:ciPulse 2.4s ease-in-out infinite}
  .ci-orbit{opacity:0;animation:ciDot 0.8s var(--ease) 1s forwards,ciSweep 120s linear 1s infinite}
  .ci-orbit--2{animation-delay:1.3s,1.3s;animation-direction:normal,reverse;animation-duration:0.8s,160s}
  .ci-sat__in{animation:ciSweep 120s linear 1s infinite reverse}
  .ci-orbit--2 .ci-sat__in{animation-direction:normal;animation-duration:160s;animation-delay:1.3s}
  .ci-radar.is-paused .ci-radar__sweep,.ci-radar.is-paused .ci-radar__center i,.ci-radar.is-paused .ci-orbit,.ci-radar.is-paused .ci-sat__in{animation-play-state:paused}

  .ci-case .ci-case__arrow{transform:scaleY(0)}
  .ci-case .ci-case__gain{opacity:0;transform:translateY(10px)}
  .ci-case.is-visible .ci-case__arrow{transform:none;transition:transform 0.45s var(--ease) 0.5s}
  .ci-case.is-visible .ci-case__gain{opacity:1;transform:none;transition:opacity 0.5s var(--ease) 0.85s,transform 0.5s var(--ease) 0.85s}

  .ci-local__body.is-visible .ci-chips li{animation:ciChip 0.45s var(--ease) both;animation-delay:calc(0.3s + var(--n,0) * 0.06s)}

  .ci-steps::before{transform:scaleX(0)}
  .ci-steps.is-visible::before{transform:none;transition:transform 1.6s var(--ease) 0.3s}
  .ci-steps .ci-step{opacity:0;transform:translateY(30px)}
  .ci-steps.is-visible .ci-step{opacity:1;transform:none;transition:opacity 0.6s var(--ease),transform 0.6s cubic-bezier(0.34,1.3,0.5,1);transition-delay:calc(0.2s + var(--k,0) * 0.18s)}
}
@keyframes ciIn{to{opacity:1;transform:none}}
@keyframes ciSweep{to{transform:rotate(360deg)}}
@keyframes ciPulse{0%,100%{transform:none}50%{transform:scale(1.25)}}
@keyframes ciDot{from{opacity:0}to{opacity:1}}
@keyframes ciChip{from{opacity:0;transform:translateY(8px) scale(0.95)}to{opacity:1;transform:none}}

/* ── Responsive ── */
@media (max-width:1100px){.ci-steps{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}.ci-step a{min-height:0;height:100%}.ci-steps::before{display:none}}
@media (max-width:980px){
  .ci-hero__grid,.ci-local,.ci-net{grid-template-columns:1fr}
  .ci-local__head{position:static}
  .ci-radar-wrap{max-width:380px}
}
@media (max-width:760px){
  .ci-cases,.ci-steps{grid-template-columns:1fr}
  .ci-radar-wrap{max-width:300px}
  .ci-sat__in em{font-size:11px}
}