@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,500&display=swap');
* { box-sizing: border-box; }
body { margin: 0; background: #f7f4ee; color: #172b4d; font: 16px/1.5 'Instrument Sans', Arial, sans-serif; }
main, footer { width: min(1184px, calc(100% - 64px)); margin: auto; }

main { padding:clamp(48px,5.5vw,78px) 0 70px; }
.pricing-intro { display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(24px,5vw,70px); align-items:center; margin-bottom:32px; }
h1 { font:500 clamp(44px,5vw,72px)/1.03 'Newsreader',Georgia,serif; letter-spacing:-.045em; margin:0; }
.currency { margin:9px 0 0; color:#596477; font-size:14px; }
.storage { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:center; padding:17px 20px; border:1px solid #dad8cf; border-radius:12px; background:#f1efe8; }
.storage h2 { font-size:15px; font-weight:650; letter-spacing:-.02em; margin:0 0 4px; }
.storage p { font-size:12px; line-height:1.5; margin:0; color:#515e70; }
.storage strong { color:#263953; font-weight:600; }
.capacity label { display:block; font-size:11px; color:#46546a; margin-bottom:4px; }
.stepper { display:flex; align-items:center; background:#fffdf9; border:1px solid #c5c7c6; border-radius:8px; }
.stepper button { width:31px; height:36px; padding:0; border:0; border-radius:7px; background:transparent; color:inherit; font-size:18px; cursor:pointer; }
.stepper button:enabled:hover { background:#eceae4; }
.stepper button:disabled { color:#a1a7ae; cursor:default; }
.stepper input { width:3.7ch; min-width:0; padding:0; border:0; background:transparent; color:inherit; font:600 15px 'Instrument Sans',Arial,sans-serif; text-align:right; appearance:textfield; }
.stepper input::-webkit-inner-spin-button,.stepper input::-webkit-outer-spin-button { appearance:none; }
.stepper span { font-size:13px; padding-inline:3px; }
.plans { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:16px; }
.plan { --edge:#deded8; --secondary:#4c596a; --mark:#43665a; --wash:#e2ebe3; display:grid; grid-template-rows:subgrid; grid-row:span 5; align-content:start; min-width:0; padding:clamp(20px,2.2vw,30px); background:#fffdf9; border:1px solid var(--edge); border-radius:16px; }
.plan:nth-child(2) { --mark:#865d49; --wash:#f3e3d6; }
.plan.suite { --edge:#425472; --secondary:#e3e8ed; --mark:#efb99d; --wash:#324763; background:linear-gradient(145deg,#213858,#162b49 75%); border-color:#172b4d; color:#fffdf9; }
.plan-name { display:flex; align-items:center; gap:11px; }
.plan h2 { margin:0; font-size:clamp(18px,1.6vw,23px); line-height:1.25; font-weight:600; letter-spacing:-.04em; }
.plan-mark { width:34px; height:34px; flex:none; position:relative; display:block; background:var(--wash); border-radius:9px; }
.plan-mark i { position:absolute; display:block; }
.mark-crm i { width:8px; height:8px; border-radius:50%; background:var(--mark); left:8px; top:9px; }
.mark-crm i:nth-child(2) { left:18px; }
.mark-crm i:last-child { width:19px; height:6px; border-radius:5px 5px 2px 2px; top:19px; }
.mark-media i { width:8px; height:8px; background:var(--mark); top:8px; left:8px; }
.mark-media i:nth-child(2) { left:18px; border-radius:50%; }
.mark-media i:last-child { top:18px; width:18px; border-radius:1px 1px 5px 1px; }
.mark-suite i { width:16px; height:10px; border-radius:2px; left:9px; top:16px; border:1.5px solid var(--mark); transform:skewY(-15deg); background:var(--wash); }
.mark-suite i:nth-child(2) { top:12px; }
.mark-suite i:last-child { top:8px; background:var(--mark); }
.price { display:flex; align-items:baseline; gap:6px; margin:24px 0 9px; white-space:nowrap; }
.price strong { font-size:clamp(33px,3.25vw,49px); font-weight:600; line-height:1.08; letter-spacing:-.055em; font-variant-numeric:tabular-nums; }
.price span { color:var(--secondary); font-size:13px; }
.price sup { align-self:center; margin-left:-4px; font-size:12px; }
.price a { color:inherit; text-decoration:none; }
.description { margin:0 0 17px; color:var(--secondary); font-size:14px; line-height:1.45; }
.demo { display:flex; align-items:center; justify-content:space-between; align-self:start; border:1px solid #cdd2d3; border-radius:8px; padding:10px 14px; font-size:14px; font-weight:600; text-decoration:none; color:#172b4d; }
.demo:hover { background:#f2f1ec; border-color:#87939d; }
.suite .demo { background:#f7e8d9; border-color:#f7e8d9; }
.suite .demo:hover { background:#ffefe0; }
.includes { margin:18px 0 0; border-top:1px solid var(--edge); padding:16px 0 0; list-style:none; align-self:start; }
.includes li { position:relative; padding-left:18px; font-size:14px; line-height:1.43; color:var(--secondary); }
.includes li + li { margin-top:8px; }
.includes li::before { content:''; position:absolute; left:1px; top:.49em; width:7px; height:4px; border:solid var(--mark); border-width:0 0 1.6px 1.6px; transform:rotate(-45deg); }
.notes,footer,footer div { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; }
.notes { margin-top:15px; font-size:13px; color:#566274; }
.notes p { margin:0; }
.notes a,footer a { color:inherit; text-underline-offset:4px; }
footer { padding:24px 0; border-top:1px solid #d8d7d3; font-size:14px; }
:where(a,button,input,summary):focus-visible { outline:3px solid #ae714f; outline-offset:3px; }
.skip-pricing { position:fixed; top:-100px; z-index:100; background:white; padding:10px; }
.skip-pricing:focus { top:0; }
@media(max-width:950px) { .pricing-intro { grid-template-columns:1fr; gap:18px; }.storage { padding:13px 18px; }.currency { margin-top:5px; } }
@media(max-width:800px) {
 main,footer { width:calc(100% - 40px); }
 .plans { grid-template-columns:1fr; gap:12px; }
 .plan { grid-row:auto; grid-template-rows:auto; }
 .price { margin-top:18px; }
 .notes,footer { align-items:flex-start; flex-direction:column; }
}
@media(max-width:420px) { .storage { grid-template-columns:1fr; gap:10px; }.capacity { display:flex; align-items:center; justify-content:space-between; }.capacity[hidden] { display:none; }.capacity label { margin:0; } }
#comparatif, #implantation { scroll-margin-top: 105px; }
#comparatif, .faq { margin-top: clamp(54px, 7vw, 96px); }
#comparatif h2,.faq h2 { font: 500 clamp(32px, 4vw, 46px)/1.1 'Newsreader', Georgia, serif; letter-spacing: -.035em; margin: 0 0 24px; }
table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 15px; }
.feature { width: 43%; }
th, td { padding: 11px 8px; text-align: center; border-bottom: 1px solid #d9d8d4; }
thead th { font-weight: 600; }
thead th:first-child, tbody th { text-align: left; }
tbody th { font-weight: 400; }
.group { background: #ebe9e3; padding: 10px; font-weight: 600; }
.marker { font-size: 16px; }
.m1 { color: #30694f; font-weight: 700; }
.m0 { color: #677281; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.faq details { border-bottom: 1px solid #d9d8d4; }
.faq summary { padding: 17px 0; cursor: pointer; font-weight: 600; }
.faq details p { margin: 0 0 18px; max-width: 70ch; }
@media(max-width: 600px) {
 .feature { width: 42%; }
 th, td { padding: 10px 3px; font-size: 12px; }
 thead th { line-height: 1.25; }
 .notes { flex-direction: column; }
}