/* Page des offres, refonte : espaces resserrés + couleurs. Trois variantes (html[data-of=a|b|c]) à comparer à l'œil. */
html[data-of] .section{padding-block:clamp(24px,3.6vw,48px)}
html[data-of] .ab-top.section{padding-top:clamp(14px,2.2vw,28px);padding-bottom:clamp(14px,2.2vw,24px)}
html[data-of] .ab-hero{gap:clamp(16px,3vw,36px);align-items:center}
html[data-of] .ab-hero h1{font-size:clamp(2rem,4.6vw,3.3rem);margin:6px 0 10px}
html[data-of] .ab-hero .lead{margin:0 0 10px}
html[data-of] .ab-fig .co-obj{max-height:230px}
html[data-of] .ab-hero:before{content:"";position:absolute;inset:-10% -4% auto auto;width:46%;height:120%;background:radial-gradient(60% 60% at 70% 40%,color-mix(in srgb,var(--blue) 22%,transparent),transparent 70%),radial-gradient(40% 40% at 90% 80%,color-mix(in srgb,var(--orange,#FF6B35) 22%,transparent),transparent 70%);pointer-events:none;z-index:-1}
html[data-of] .ab-hero{position:relative}
html[data-of] .abx h2,html[data-of] .ab-comp h2,html[data-of] .ab-faq h2{font-size:clamp(1.5rem,2.8vw,2.1rem);margin-top:6px!important}
html[data-of] .abx-grid{margin-top:14px;gap:16px}
html[data-of] .abx-opt span{padding:10px 14px}
html[data-of] .abx-res{padding:16px 18px;background:linear-gradient(160deg,color-mix(in srgb,var(--blue) 12%,var(--card)),var(--card) 60%)}
html[data-of] .abx-k{font-size:1.45rem}
html[data-of] .abx-tot span{font-size:1.9rem}
html[data-of] .of-band{margin-top:0}
html[data-of] .of-head{margin-bottom:10px}
html[data-of] .of-head h3{font-size:1.35rem;margin:0}
html[data-of] .of-grid{gap:14px}
html[data-of] .of-plus{margin-top:14px;gap:14px}
html[data-of] .ab-comp.section,html[data-of] .ab-faq.section{padding-block:clamp(20px,3vw,40px)}
html[data-of] .ab-jw.section{padding-block:clamp(24px,3.4vw,44px)}
/* couleur par famille : coach = bleu / orange / encre ; autonomie = vert d'eau */
html[data-of] .of-card{--of-c:var(--blue);position:relative;padding:18px 18px 16px;overflow:hidden;gap:10px}
html[data-of] .of-card:nth-child(2){--of-c:var(--orange-text,#b8431a)}
html[data-of] .of-card:nth-child(3){--of-c:var(--fg)}
html[data-of] .ab-offres .of-band:nth-of-type(2) .of-card{--of-c:var(--cyan-text,#0B6A52)}
html[data-of] .of-card h3{font-size:1.35rem;margin:2px 0 0}
html[data-of] .of-tag{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;background:color-mix(in srgb,var(--of-c) 14%,var(--card));color:var(--of-c);font-weight:700;font-size:.78rem;margin:0}
html[data-of] .of-n,html[data-of] .of-montant{color:var(--of-c)}
html[data-of] .of-card ul{margin:6px 0 8px;gap:5px}
html[data-of] .of-card li::marker{color:var(--of-c)}
html[data-of] .of-card .btn{margin-top:auto}
html[data-of] .of-card.is-mis{box-shadow:0 0 0 3px color-mix(in srgb,var(--of-c) 55%,transparent)}
/* A : bandeau de couleur en tête de carte, fonds teintés par famille */
html[data-of=a] .of-card:before{content:"";position:absolute;inset:0 0 auto 0;height:9px;background:var(--of-c)}
html[data-of=a] .of-card{padding-top:24px;background:linear-gradient(180deg,color-mix(in srgb,var(--of-c) 7%,var(--card)),var(--card) 55%)}
html[data-of=a] .of-band{padding:16px;border-radius:26px;background:color-mix(in srgb,var(--blue) 6%,transparent)}
html[data-of=a] .ab-offres .of-band:nth-of-type(2){background:color-mix(in srgb,var(--cyan-text,#0B6A52) 8%,transparent)}
/* B : onglets, un seul groupe à la fois */
html[data-of=b] .ofv-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px;position:sticky;top:78px;z-index:5}
html[data-of=b] .ofv-tabs button{appearance:none;border:1.5px solid var(--fg);background:var(--card);color:var(--fg);border-radius:99px;padding:8px 18px;font:700 1rem var(--sans);min-height:44px;cursor:pointer;transition:transform .2s,background .2s}
html[data-of=b] .ofv-tabs button:hover{transform:translateY(-2px)}
html[data-of=b] .ofv-tabs button[aria-selected=true]{background:var(--blue);color:var(--on-blue);box-shadow:3px 3px 0 var(--orange,#FF6B35)}
html[data-of=b] .of-band[hidden]{display:none}
html[data-of=b] .of-card{border-top:6px solid var(--of-c)}
html[data-of=b] .of-card .of-prix{padding:8px 12px;border-radius:14px;background:color-mix(in srgb,var(--of-c) 10%,var(--card))}
/* C : lignes compactes, détail déplié au clic */
html[data-of=c] .of-grid{grid-template-columns:1fr!important;gap:10px}
html[data-of=c] .of-card{display:grid!important;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;align-items:center;gap:6px 18px;padding:12px 18px;border-left:10px solid var(--of-c);cursor:pointer}
html[data-of=c] .of-card>div:first-child{grid-column:1}html[data-of=c] .of-card .of-desc{grid-column:1;margin:0}
html[data-of=c] .of-card .of-prix{grid-column:2;grid-row:1/3}
html[data-of=c] .of-card .btn{grid-column:3;grid-row:1/3;margin:0;white-space:nowrap}
html[data-of=c] .of-card ul{grid-column:1/-1;display:none;margin:6px 0 2px;padding-top:10px;border-top:1px dashed var(--line)}
html[data-of=c] .of-card.ofv-ouverte ul{display:grid}
html[data-of=c] .of-card:after{content:"+";position:absolute;right:10px;top:6px;font:700 1.1rem var(--sans);color:var(--of-c);transition:transform .25s}
html[data-of=c] .of-card.ofv-ouverte:after{transform:rotate(45deg)}
html[data-of=c] .of-img{display:none}
@media (max-width:900px){html[data-of=c] .of-card{grid-template-columns:1fr}html[data-of=c] .of-card .of-prix,html[data-of=c] .of-card .btn{grid-column:1;grid-row:auto}html[data-of=b] .ofv-tabs{top:70px}}
@media (prefers-reduced-motion:reduce){html[data-of] *{transition:none!important}}

/* symboles */
.ofv-ic{display:inline-grid;place-items:center;flex:none;border-radius:14px;background:color-mix(in srgb,var(--of-c,var(--blue)) 16%,var(--card));color:var(--of-c,var(--blue))}
.ofv-big{width:46px;height:46px}.ofv-sm{width:34px;height:34px;border-radius:11px}.ofv-sm svg{width:18px;height:18px}.ofv-xs{width:26px;height:26px;border-radius:9px}.ofv-xs svg{width:15px;height:15px}
html[data-of] .of-card .ofv-tt{display:flex;align-items:center;gap:12px}
html[data-of] .of-card .ofv-tt>div{min-width:0}
html[data-of] .of-card .of-tag{margin-bottom:2px}
html[data-of] .of-plus li{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:start}
html[data-of] .of-plus li>.ofv-ic{grid-row:1/4;--of-c:var(--blue)}
html[data-of] .of-plus li:nth-child(2)>.ofv-ic{--of-c:var(--orange-text,#b8431a)}
html[data-of] .of-plus li:nth-child(3)>.ofv-ic{--of-c:var(--cyan-text,#0B6A52)}
html[data-of] .of-plus li>:not(.ofv-ic){grid-column:2}
html[data-of] .abx-opt span{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center}
html[data-of] .abx-opt span .ofv-ic{grid-row:1/3;--of-c:var(--blue)}
html[data-of] .abx-opt input:checked+span .ofv-ic{background:var(--bg);color:var(--fg)}
.ofv-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:10px 0 8px}
.ofv-chips li{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 5px;border-radius:99px;border:1.5px solid var(--line);background:var(--card);font:600 .9rem var(--sans);color:var(--fg)}
.ofv-chips .ofv-ic:nth-child(n){--of-c:var(--blue)}
.ofv-chips li:nth-child(2) .ofv-ic{--of-c:var(--orange-text,#b8431a)}.ofv-chips li:nth-child(3) .ofv-ic{--of-c:var(--cyan-text,#0B6A52)}
/* points forts : coche en couleur au lieu d'une puce */
html[data-of] .of-card ul{list-style:none;padding:0}
html[data-of] .of-card li{position:relative;padding-left:26px}
html[data-of] .of-card li:before{content:"";transform:none!important;border:0!important;box-shadow:none!important;height:18px!important;position:absolute;left:0;top:.28em;width:18px;height:18px;border-radius:50%;background:color-mix(in srgb,var(--of-c) 18%,var(--card)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/70% no-repeat}