/* ============================================================
   ca-content.css — COMPOSANTS DE CONTENU (pages refondues via canvas)
   hero diagonal · article+sidebar sticky · cartes · tableaux · conseils.
   À charger APRÈS ca-ui.css.
   ============================================================ */
.hero-auto{position:relative;overflow:hidden;background:var(--canvas-soft)}
.hero-auto .mesh{position:absolute;inset:0}
.hero-auto .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.66) 55%,#fff 100%)}
.hero-pic{position:absolute;top:0;right:0;bottom:0;width:44%;min-width:300px;clip-path:polygon(24% 0,100% 0,100% 100%,0 100%)}
.hero-pic img{width:100%;height:100%;object-fit:cover}
.hero-pic .tint{position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,30,84,.30),rgba(28,30,84,0) 45%)}
.hero-inner{position:relative;max-width:var(--wrap);margin-inline:auto;padding:44px 24px 52px;display:flex;flex-direction:column;gap:16px}
.crumb{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--ink-mute);flex-wrap:wrap}
.crumb a{color:var(--ink-mute);text-decoration:none}.crumb a:hover{color:var(--primary)}
.hero-inner h1{max-width:56%;min-width:280px;font-size:clamp(30px,4.2vw,46px);font-weight:700;line-height:1.15;letter-spacing:-.6px}
.hero-inner .lead{max-width:52%;min-width:280px;font-size:16px;font-weight:300;line-height:1.6;color:var(--ink-2)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.layout{max-width:var(--wrap);margin-inline:auto;padding:44px 24px 88px;display:grid;
  grid-template-columns:minmax(0,1fr) 340px;gap:44px;align-items:start}
.article{min-width:0;display:flex;flex-direction:column;gap:22px}
.aside{min-width:0;position:sticky;top:90px;display:flex;flex-direction:column;gap:16px}
.article h2{font-size:28px;font-weight:700;line-height:1.15;letter-spacing:-.56px;scroll-margin-top:90px;margin-top:6px}
.article h3{font-size:18px;font-weight:500}
.article p{font-size:16px;font-weight:300;line-height:1.6;color:var(--ink-2)}
.article a{color:var(--primary);text-decoration:none}.article a:hover{text-decoration:underline}
.meta{display:flex;gap:18px;flex-wrap:wrap;align-items:center;font-size:13.5px;color:var(--ink-2);padding-bottom:18px;border-bottom:1px solid var(--hairline)}
.meta span{display:inline-flex;align-items:center;gap:6px}
.cardgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.icard{border:1px solid var(--hairline);border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;gap:10px}
.icard .ic{width:38px;height:38px;border-radius:var(--r-md);background:var(--primary-subtle-hover);display:grid;place-items:center}
.icard .ic svg *{stroke:var(--primary-press)}
.icard h3{font-size:16.5px;font-weight:500}
.icard p{font-size:14px;font-weight:300;line-height:1.55;color:var(--ink-2)}
.formulas{display:flex;flex-direction:column;gap:14px}
.formula{border:1px solid var(--hairline);border-radius:var(--r-lg);padding:20px 22px;display:flex;gap:16px;align-items:flex-start}
.formula .ic{width:38px;height:38px;flex-shrink:0;border-radius:var(--r-pill);display:grid;place-items:center}
.formula .ic.a{background:var(--primary-subtle-hover)}.formula .ic.a svg *{stroke:var(--primary-press)}
.formula .ic.b{background:var(--cream)}.formula .ic.b svg *{stroke:var(--lemon)}
.formula .ic.c{background:var(--primary)}.formula .ic.c svg *{stroke:#fff}
.formula .tx{display:flex;flex-direction:column;gap:6px}
.formula h3{font-size:17px;font-weight:500}
.formula p{font-size:14.5px;font-weight:300;line-height:1.55;color:var(--ink-2)}
.note{border:1px solid var(--hairline);border-left:3px solid var(--primary);border-radius:var(--r-lg);background:var(--canvas-soft);padding:18px 22px;display:flex;gap:14px;align-items:flex-start}
.note.c{border-left-color:var(--lemon);background:var(--cream)}
.note p{font-size:14px;font-weight:300;line-height:1.55;color:var(--ink-2)}
.note strong{font-weight:500;color:var(--ink)}
.note svg{flex-shrink:0;margin-top:2px}
.ranklist{display:flex;flex-direction:column;gap:12px}
.rank{display:flex;gap:16px;align-items:flex-start;border:1px solid var(--hairline);border-radius:var(--r-lg);padding:16px 18px}
.rank .logo-box{width:66px;height:66px;flex-shrink:0;border:1px solid var(--hairline);border-radius:var(--r-md);display:grid;place-items:center;background:#fff;padding:8px}
.rank .logo-box img{max-width:100%;max-height:100%;object-fit:contain}
.rank h3{font-size:16.5px;font-weight:500;margin-bottom:4px}
.rank h3 .num{color:var(--primary);font-weight:600}
.rank p{font-size:14px;font-weight:300;line-height:1.55;color:var(--ink-2)}
.tablewrap{overflow-x:auto;border:1px solid var(--hairline);border-radius:var(--r-lg)}
.tablewrap table{width:100%;border-collapse:collapse;font-size:14px;min-width:420px}
.tablewrap th{text-align:left;padding:12px 16px;font-weight:500;border-bottom:1px solid var(--hairline);background:var(--canvas-soft)}
.tablewrap td{padding:12px 16px;border-bottom:1px solid var(--hairline);font-weight:500}
.tablewrap tr:last-child td{border-bottom:none}
.tablewrap td.price{text-align:right;color:var(--primary);font-feature-settings:"tnum" 1}
.tablewrap td.f{font-weight:300;color:var(--ink-2)}
.tips{padding-left:20px;display:flex;flex-direction:column;gap:12px;font-size:15px;font-weight:300;line-height:1.6;color:var(--ink-2)}
.tips strong{font-weight:500;color:var(--ink)}
.figure{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--hairline)}
.figure img{width:100%;height:auto;display:block}
.brandgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.brand{display:flex;align-items:center;gap:10px;border:1px solid var(--hairline);border-radius:var(--r-lg);padding:10px 12px;text-decoration:none;color:var(--ink);font-size:13.5px;font-weight:500}
.brand:hover{border-color:var(--primary-subtle-hover);background:var(--canvas-soft)}
.brand img{width:40px;height:27px;object-fit:contain;flex-shrink:0}
.themes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px 28px}
.themes a{font-size:14px;color:var(--primary);text-decoration:none}.themes a:hover{text-decoration:underline}
.ctabox{border:1px solid var(--primary);border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.ctabox strong{font-weight:500;font-size:17px}
.ctabox p{font-size:14px;font-weight:300;line-height:1.55;color:var(--ink-2)}
.pricecard{border:1px solid var(--hairline);border-radius:var(--r-xl);background:#fff;box-shadow:var(--shadow-2);padding:24px;display:flex;flex-direction:column;gap:10px}
.pricecard strong{font-weight:500;font-size:16px}
.pricecard .from{font-size:13px;color:var(--ink-mute)}
.pricecard .price{font-size:32px;font-weight:300;letter-spacing:-.64px;font-feature-settings:"tnum" 1}
.pricecard .price small{font-size:14px;color:var(--ink-mute);letter-spacing:0}
.pricecard .fine{font-size:12px;color:var(--ink-mute);text-align:center}
.toc{border:1px solid var(--hairline);border-radius:var(--r-lg);padding:20px 24px;display:flex;flex-direction:column;gap:10px}
.toc .lab{font-size:10px;letter-spacing:.1px;text-transform:uppercase;color:var(--ink-mute)}
.toc a{font-size:14px;font-weight:300;color:var(--ink-2);text-decoration:none}.toc a:hover{color:var(--primary)}
.whycard{border:1px solid var(--hairline);border-radius:var(--r-lg);background:var(--canvas-soft);padding:20px 22px;display:flex;flex-direction:column;gap:10px}
.whycard .hd{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500}
.whycard .li{display:flex;gap:8px;align-items:center;font-size:13.5px;font-weight:300;color:var(--ink-2)}
.conseils-sec{background:var(--canvas-soft);border-top:1px solid var(--hairline)}
.conseils-sec .wrap{padding-block:56px}
.conseils-sec h2{font-size:24px;font-weight:700;letter-spacing:-.48px;margin-bottom:24px}
.conseils-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.conseil{border:1px solid var(--hairline);border-radius:var(--r-lg);background:#fff;padding:16px 18px;font-size:14px;color:var(--ink);text-decoration:none;display:flex;justify-content:space-between;gap:8px;align-items:center}
.conseil:hover{border-color:var(--primary-subtle-hover)}
.conseil span{color:var(--primary)}
@media(max-width:760px){.hero-pic{display:none}.hero-inner h1,.hero-inner .lead{max-width:100%}}
@media(max-width:980px){.layout{grid-template-columns:1fr}.aside{position:static;max-width:none}}

/* ============================================================
   CONTENU RESTAURÉ (texte original des anciennes pages, restylé)
   ============================================================ */
.restored{font-size:16px;font-weight:300;line-height:1.7;color:var(--ink-2)}
/* dans le layout article+sidebar, l'article restauré occupe la colonne */
.layout .article.restored{display:block;max-width:none;margin:0;padding:0;flex:1 1 560px;min-width:0}
.restored .container,.restored .row-fluid,.restored section{width:auto;max-width:none;margin:0;padding:0;display:block}
.restored article{display:block}
.restored h2{font-size:26px;font-weight:700;color:var(--ink);letter-spacing:-.4px;line-height:1.2;margin:38px 0 14px;scroll-margin-top:90px}
.restored h3{font-size:19px;font-weight:600;color:var(--ink);margin:26px 0 10px}
.restored p{margin:0 0 14px}
.restored a{color:var(--primary);text-decoration:none}.restored a:hover{text-decoration:underline}
.restored strong,.restored b{font-weight:600;color:var(--ink)}
.restored ul,.restored ol{margin:0 0 16px;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.restored ul.simpleList{list-style:none;padding-left:0}
.restored ul.simpleList li{position:relative;padding:9px 0 9px 28px;border-bottom:1px solid var(--hairline)}
.restored ul.simpleList li::before{content:"";position:absolute;left:4px;top:18px;width:12px;height:2px;background:var(--primary)}
.restored img{max-width:100%;height:auto;border-radius:var(--r-lg)}
.restored img.imgLeft{float:left;width:340px;max-width:44%;margin:6px 24px 14px 0}
.restored picture{display:inline}
.restored table{width:100%;border-collapse:collapse;font-size:14px;margin:20px 0;border:1px solid var(--hairline);border-radius:var(--r-lg);overflow:hidden;table-layout:fixed}
.restored th{background:var(--brand-dark);color:#fff;text-align:left;padding:12px 14px;font-weight:600;overflow-wrap:anywhere}
.restored td{padding:11px 14px;border-bottom:1px solid var(--hairline);vertical-align:middle;overflow-wrap:anywhere}
.restored tr:last-child td{border-bottom:none}
.restored td img{width:70px;height:auto;border-radius:6px}
.restored .sommaire{display:none} /* le sommaire est repris dans la sidebar */
.restored .sommaire .toc_title{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--ink-mute);margin:0 0 12px;font-weight:600}
.restored .sommaire ul{list-style:none;padding:0;gap:7px}
.restored .sommaire li{padding:0}
.restored .sommaire a{font-size:14px;color:var(--ink-2)}
.restored .sommaire a:hover{color:var(--primary)}
.restored .back_block{background:var(--canvas-soft);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:20px 24px;margin:26px 0}
.restored .centreb{text-align:center;margin:28px 0}
.restored .buttonn,.restored .button,.restored .buttonr,.restored .buttonn:link{display:inline-block;background:var(--primary);color:#fff;padding:13px 26px;border-radius:var(--r-pill);text-decoration:none;font-weight:500;font-size:14px}
.restored .buttonn:hover,.restored .button:hover,.restored .buttonr:hover{background:var(--primary-deep);text-decoration:none}
.restored .clear{clear:both}
@media(max-width:640px){.restored img.imgLeft{float:none;width:100%;max-width:100%;margin:10px 0}}