/* Page /odoo/ : intégrateur Odoo. Hero avec tableau de bord reconstitué, vitrine
   des modules à onglets, cas concret, méthode et prix, Odoo + IA, questions à
   poser à un intégrateur, présence locale. */
.oq-hero{position:relative;padding:clamp(48px,8vh,96px) 0 clamp(56px,8vh,96px);overflow:hidden}
.oq-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(50% 60% at 78% 40%,rgba(250,181,18,0.10),transparent 70%),linear-gradient(rgba(255,255,255,0.028) 1px,transparent 1px) 0 0/56px 56px,linear-gradient(90deg,rgba(255,255,255,0.028) 1px,transparent 1px) 0 0/56px 56px;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.oq-hero__wrap{position:relative;display:grid;grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr);gap:clamp(32px,4.5vw,64px);align-items:center}
.oq-hero .breadcrumb{margin-bottom:28px}
.oq-hero .eyebrow{margin-bottom:18px}
.oq-hero__title{margin:0 0 22px;font:700 clamp(40px,4.6vw,68px)/1.02 var(--font-display);letter-spacing:-0.045em;color:var(--text)}
.oq-hero__title span{color:var(--yellow)}
.oq-hero__sub{max-width:54ch;margin:0 0 30px;font-size:clamp(17px,1.3vw,19px);line-height:1.62;color:#b9b6b0}
.oq-hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:36px}
.oq-hero__facts{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--border)}
.oq-hero__facts li{display:flex;flex-direction:column;gap:4px;padding:18px 18px 0 0}
.oq-hero__facts li+li{padding-left:18px;border-left:1px solid var(--border)}
.oq-hero__facts b{font:700 clamp(18px,1.6vw,22px) var(--font-display);letter-spacing:-0.02em;color:var(--text)}
.oq-hero__facts span{font-size:13px;line-height:1.4;color:var(--muted)}

/* Tableau de bord reconstitué */
.oq-app{position:relative;border:1px solid #2a2a2a;border-radius:16px;background:#0f0f0f;box-shadow:0 50px 100px -40px rgba(0,0,0,0.9),0 0 0 1px rgba(255,255,255,0.02) inset}
.oq-app__bar{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1px solid #222;background:#141414;border-radius:16px 16px 0 0}
.oq-app__bar i{width:9px;height:9px;border-radius:50%;background:#2e2e2e}
.oq-app__bar span{margin-left:10px;font:12px var(--font-mono);color:#7c7a75}
.oq-app__main{display:grid;grid-template-columns:132px minmax(0,1fr)}
.oq-app__nav{display:flex;flex-direction:column;gap:2px;padding:12px 8px;border-right:1px solid #1e1e1e}
.oq-app__nav span{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;font-size:12.5px;color:#8d8a84}
.oq-app__nav span b{width:16px;text-align:center;font-weight:600;color:#5f5d59}
.oq-app__nav .is-on{background:#1d1808;color:var(--text)}
.oq-app__nav .is-on b{color:var(--yellow)}
.oq-app__body{display:flex;flex-direction:column;gap:12px;padding:14px;min-width:0}
.oq-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.oq-kpis div{display:flex;flex-direction:column;gap:3px;padding:11px 12px;border:1px solid #222;border-radius:10px;background:#141414;min-width:0}
.oq-kpis span{font-size:11px;color:#8d8a84;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oq-kpis b{font:700 18px var(--font-display);letter-spacing:-0.02em;color:var(--text);white-space:nowrap}
.oq-kpis em{font-style:normal;font-size:11px;color:#8d8a84}
.oq-kpis em.up,.oq-list em.ok{color:var(--ok)}
.oq-kpis em.warn,.oq-list em.warn{color:var(--yellow)}
.oq-app__row{display:grid;grid-template-columns:1.1fr 1fr;gap:10px}
.oq-chart,.oq-pipe{padding:12px;border:1px solid #222;border-radius:10px;background:#141414}
.oq-chart p,.oq-pipe p{margin:0 0 10px;font-size:11px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:#8d8a84}
.oq-bars{display:flex;align-items:flex-end;gap:8px;height:96px}
.oq-bars i{flex:1;height:var(--h);border-radius:4px 4px 0 0;background:#2a2a2a;transform-origin:50% 100%}
.oq-bars i.is-now{background:var(--yellow)}
.oq-pipe__row{display:grid;grid-template-columns:76px 1fr 22px;align-items:center;gap:8px;margin-bottom:8px;font-size:11.5px;color:#bdbab4}
.oq-pipe__row i{height:8px;border-radius:4px;background:linear-gradient(90deg,#3a3a3a var(--w),#1e1e1e var(--w))}
.oq-pipe__row.is-won i{background:linear-gradient(90deg,var(--ok) var(--w),#1e1e1e var(--w))}
.oq-pipe__row b{text-align:right;color:var(--text)}
.oq-list{border:1px solid #222;border-radius:10px;overflow:hidden}
.oq-list div{display:grid;grid-template-columns:86px 1fr auto 92px;gap:10px;align-items:center;padding:9px 12px;font-size:12px;color:#bdbab4;background:#141414}
.oq-list div+div{border-top:1px solid #1e1e1e}
.oq-list span:first-child{font-family:var(--font-mono);color:#7c7a75}
.oq-list b{color:var(--text);font-weight:600}
.oq-list em{font-style:normal;text-align:right;color:#8d8a84}
.oq-app__note{position:absolute;right:12px;bottom:-26px;margin:0;font-size:11px;color:#5f5d59}
@media (prefers-reduced-motion:no-preference){
  .oq-bars i{animation:oqGrow 0.9s var(--ease) backwards}
  .oq-bars i:nth-child(2){animation-delay:.08s}.oq-bars i:nth-child(3){animation-delay:.16s}.oq-bars i:nth-child(4){animation-delay:.24s}.oq-bars i:nth-child(5){animation-delay:.32s}.oq-bars i:nth-child(6){animation-delay:.4s}
  .oq-kpis div{animation:oqUp 0.6s var(--ease) backwards}
  .oq-kpis div:nth-child(2){animation-delay:.1s}.oq-kpis div:nth-child(3){animation-delay:.2s}.oq-kpis div:nth-child(4){animation-delay:.3s}
}
@keyframes oqGrow{from{transform:scaleY(0)}}
@keyframes oqUp{from{opacity:0;transform:translateY(10px)}}

/* Sections */
.oq-sec{padding:clamp(72px,10vh,120px) 0}
.oq-sec--alt{background:#0d0d0d;border-top:1px solid #161616;border-bottom:1px solid #161616}
.oq-sec .section-head{margin-bottom:40px}
.oq-more{margin:24px 0 0;color:var(--muted)}
.oq-more a{color:var(--yellow);font-weight:600;text-decoration:none}

/* Deux situations */
.oq-paths{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.oq-path{display:flex;flex-direction:column;gap:14px;padding:clamp(26px,3vw,40px);border:1px solid var(--border);border-radius:20px;background:linear-gradient(160deg,#151515,#0f0f0f);text-decoration:none;color:inherit;transition:border-color .35s var(--ease),transform .35s var(--ease)}
.oq-path:hover{border-color:rgba(250,181,18,0.55);transform:translateY(-3px)}
.oq-path__k{font:600 12px var(--font-mono);letter-spacing:0.06em;text-transform:uppercase;color:var(--yellow)}
.oq-path h3{margin:0;font:700 clamp(24px,2.4vw,32px)/1.1 var(--font-display);letter-spacing:-0.03em;color:var(--text)}
.oq-path p{margin:0;line-height:1.65;color:#b2afa9}
.oq-path__go{margin-top:auto;padding-top:10px;font-weight:600;color:var(--yellow)}

/* Vitrine des modules */
.oq-mods{display:grid;grid-template-columns:minmax(240px,0.8fr) minmax(0,2fr);gap:24px;align-items:start}
.oq-mods__list{display:flex;flex-direction:column;gap:6px}
.oq-mods__list button{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:14px 18px;border:1px solid transparent;border-radius:12px;background:transparent;color:#cfccc6;font:600 17px var(--font-display);letter-spacing:-0.01em;text-align:left;cursor:pointer;transition:background .3s,border-color .3s,color .3s}
.oq-mods__list button span{font:400 13px var(--font-body);color:var(--muted)}
.oq-mods__list button:hover{background:#141414}
.oq-mods__list button[aria-selected="true"]{border-color:rgba(250,181,18,0.5);background:#1a1607;color:var(--text)}
.oq-mods__list button[aria-selected="true"] span{color:#cbb98a}
.oq-mods__list button:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.oq-panel{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:center;padding:clamp(22px,2.6vw,36px);border:1px solid var(--border);border-radius:20px;background:#121212;min-height:340px}
.oq-panel[hidden]{display:none}
.oq-panel:not([hidden]){animation:oqUp .45s var(--ease)}
.oq-panel__txt h3{margin:0 0 12px;font:700 clamp(22px,2vw,28px)/1.15 var(--font-display);letter-spacing:-0.03em;color:var(--text)}
.oq-panel__txt p{margin:0 0 12px;line-height:1.65;color:#b2afa9}
.oq-panel__rep{padding-top:12px;border-top:1px solid var(--border);font-size:14px;color:var(--muted)!important}
.oq-panel__rep a{color:var(--yellow);text-decoration:none;font-weight:600}
.oq-panel__ui{padding:16px;border:1px solid #232323;border-radius:14px;background:#0d0d0d}
.oq-kb{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.oq-kb p{margin:0 0 8px;font-size:11px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:#8d8a84}
.oq-kb i{display:block;height:40px;margin-bottom:8px;border:1px solid #262626;border-radius:8px;background:#161616}
.oq-kb i.is-hot{border-color:rgba(250,181,18,0.6);background:#1d1808}
.oq-kb i.is-won{border-left:3px solid var(--ok)}
.oq-doc{display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:10px;background:#141414}
.oq-doc p{margin:0;font:600 12px var(--font-mono);letter-spacing:0.06em;color:var(--yellow)}
.oq-doc i{display:block;height:8px;width:var(--w);border-radius:4px;background:#2c2c2c}
.oq-doc b{margin-top:6px;font:700 20px var(--font-display);color:var(--text)}
.oq-tag{align-self:flex-start;padding:5px 10px;border-radius:999px;background:rgba(95,191,125,0.12);color:var(--ok);font-size:12px;font-weight:600}
.oq-stock{display:flex;flex-direction:column;gap:12px}
.oq-stock div{display:grid;grid-template-columns:110px 1fr 46px;align-items:center;gap:10px;font-size:12.5px;color:#cfccc6}
.oq-stock i{height:9px;border-radius:5px;background:linear-gradient(90deg,#4a4844 var(--w),#1e1e1e var(--w))}
.oq-stock i.warn{background:linear-gradient(90deg,var(--yellow) var(--w),#1e1e1e var(--w))}
.oq-stock b{text-align:right;color:var(--text)}

/* Cas concret */
.oq-case{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:center;padding:clamp(24px,3vw,44px);border:1px solid rgba(250,181,18,0.35);border-radius:24px;background:radial-gradient(70% 90% at 0% 50%,rgba(250,181,18,0.10),transparent 70%),#111}
.oq-case__media img{display:block;width:100%;height:auto}
.oq-case__title{margin:0 0 16px;font:700 clamp(26px,2.8vw,40px)/1.08 var(--font-display);letter-spacing:-0.04em;color:var(--text)}
.oq-case__txt>p{line-height:1.65;color:#b9b6b0}
.oq-case__tags{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 24px;padding:0;list-style:none}
.oq-case__tags li{padding:6px 12px;border:1px solid #2c2c2c;border-radius:999px;font-size:13px;color:#cfccc6}
.oq-case__go{font-weight:600;color:var(--yellow);text-decoration:none;border-bottom:2px solid var(--yellow);padding-bottom:3px}
.oq-case__note{margin-top:18px;font-size:13px;color:var(--muted)!important}

/* Méthode et prix */
.oq-prices{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:18px;margin-bottom:40px}
.oq-price{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.4vw,32px);border:1px solid var(--border);border-radius:20px;background:#121212}
.oq-price--main{border-color:rgba(250,181,18,0.6);background:linear-gradient(160deg,#1f1a08,#121212 60%)}
.oq-price__k{font-size:12px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted)}
.oq-price--main .oq-price__k{color:var(--yellow)}
.oq-price h3{margin:0;font:700 22px var(--font-display);letter-spacing:-0.02em;color:var(--text)}
.oq-price__v{margin:0;font:800 clamp(28px,2.8vw,40px)/1 var(--font-display);letter-spacing:-0.04em;color:var(--text)}
.oq-price p:not(.oq-price__v){margin:0;line-height:1.6;color:#b2afa9}
.oq-price .btn{align-self:flex-start;margin-top:8px}
.oq-steps{display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin:0;padding:0;list-style:none;counter-reset:none;border-top:1px solid var(--border)}
.oq-steps li{position:relative;padding:22px 18px 0 0}
.oq-steps li::before{content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 4px rgba(250,181,18,0.15)}
.oq-steps b{display:block;margin-bottom:8px;font:600 12px var(--font-mono);color:var(--yellow)}
.oq-steps h3{margin:0 0 8px;font:700 16px/1.25 var(--font-display);color:var(--text)}
.oq-steps p{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}
.oq-aid{margin:36px 0 0;padding:18px 22px;border-left:3px solid var(--yellow);border-radius:0 12px 12px 0;background:#141414;line-height:1.65;color:#b9b6b0}
.oq-aid b{color:var(--text)}
.oq-aid a{color:var(--yellow);font-weight:600;text-decoration:none}

/* Odoo + IA */
.oq-ia{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.oq-ia__card{position:relative;padding:clamp(22px,2.4vw,32px);border:1px solid var(--border);border-radius:20px;background:#121212;overflow:hidden}
.oq-ia__n{display:block;margin-bottom:28px;font:800 56px/1 var(--font-display);letter-spacing:-0.05em;color:transparent;-webkit-text-stroke:1.2px rgba(250,181,18,0.6)}
.oq-ia__card h3{margin:0 0 10px;font:700 21px/1.2 var(--font-display);letter-spacing:-0.02em;color:var(--text)}
.oq-ia__card p{margin:0;line-height:1.62;color:#b2afa9}

/* Quatre questions */
.oq-qa{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.3fr);gap:clamp(28px,5vw,80px);align-items:start}
.oq-qa__head{position:sticky;top:110px}
.oq-qa__list{margin:0}
.oq-qa__list div{padding:22px 0;border-top:1px solid var(--border)}
.oq-qa__list div:last-child{border-bottom:1px solid var(--border)}
.oq-qa__list dt{margin-bottom:8px;font:700 clamp(19px,1.6vw,22px) var(--font-display);letter-spacing:-0.02em;color:var(--text)}
.oq-qa__list dd{margin:0;line-height:1.65;color:#b2afa9}
.oq-qa__list a{color:var(--yellow)}

/* Présence locale */
.oq-local{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.oq-local__title{margin:0 0 22px;font:700 clamp(24px,2.4vw,34px)/1.12 var(--font-display);letter-spacing:-0.03em;color:var(--text)}
.oq-cities{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.oq-cities a{display:inline-block;padding:9px 14px;border:1px solid var(--border);border-radius:999px;color:#cfccc6;text-decoration:none;font-size:14px;transition:border-color .3s,color .3s}
.oq-cities a:hover{border-color:var(--yellow);color:var(--text)}
.oq-topics{margin:18px 0 0;padding:0;list-style:none}
.oq-topics a{display:flex;flex-direction:column;gap:3px;padding:16px 0;border-top:1px solid var(--border);text-decoration:none}
.oq-topics li:last-child a{border-bottom:1px solid var(--border)}
.oq-topics b{color:var(--text);font-weight:600}
.oq-topics span{font-size:14px;color:var(--muted)}
.oq-topics a:hover b{color:var(--yellow)}

@media (max-width:1080px){
  .oq-hero__wrap{grid-template-columns:1fr}
  .oq-steps{grid-template-columns:repeat(3,1fr);row-gap:28px}
}
@media (max-width:860px){
  .oq-paths,.oq-mods,.oq-panel,.oq-case,.oq-prices,.oq-ia,.oq-qa,.oq-local{grid-template-columns:1fr}
  .oq-qa__head{position:static}
  .oq-mods__list{flex-direction:row;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
  .oq-mods__list button{flex:none}
  .oq-mods__list button span{display:none}
  .oq-panel{min-height:0}
}
@media (max-width:600px){
  .oq-app__main{grid-template-columns:1fr}
  .oq-app__nav{display:none}
  .oq-kpis{grid-template-columns:repeat(2,1fr)}
  .oq-app__row{grid-template-columns:1fr}
  .oq-list div{grid-template-columns:1fr auto;}
  .oq-list span:first-child,.oq-list em{display:none}
  .oq-hero__facts{grid-template-columns:1fr}
  .oq-hero__facts li+li{padding-left:0;border-left:0;border-top:1px solid var(--border)}
  .oq-hero__facts li{padding:12px 0}
  .oq-steps{grid-template-columns:1fr 1fr}
}