:root{--accent:#0E7C74;--accent2:#C99A52;--dark:#122421;--light:#E7F1EE;--ink:#14201D;--muted:#5C6E69;--line:rgba(20,32,29,.1);--display:"Cormorant",Georgia,serif;--body:"Karla",Arial,sans-serif;--mono:"Space Mono",ui-monospace,monospace;
--paper:#fff;--bg:#F5F8F7;--accent-soft:color-mix(in srgb,var(--accent) 12%,#fff);--accent-soft-2:color-mix(in srgb,var(--accent) 8%,#fff);--shadow-sm:0 12px 30px -20px rgba(18,22,28,.35);--shadow-md:0 26px 60px -28px rgba(18,22,28,.4);--radius-lg:26px;--radius-md:18px;--radius-sm:12px;--radius-pill:999px}
*{box-sizing:border-box}html{scroll-behavior:smooth;overflow-x:hidden}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);line-height:1.68;overflow-x:hidden}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.12;margin-top:0;letter-spacing:-.01em}
.wrap{width:min(1290px,calc(100% - 40px));margin:auto}
/* Plain dash-prefixed label, not a pill/badge — matches the reference site's
   quiet editorial eyebrow convention used consistently above every heading. */
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;font-weight:600;color:var(--accent)}
.eyebrow:before{content:"";width:30px;height:1px;background:currentColor;opacity:.55}
.eyebrow--light{color:#DCDDFC}
.eyebrow--onaccent{color:#fff}
.sys-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(91,95,239,.22)}

/* ===== TOP BAR + HEADER ===== */
.sys-bar{min-height:34px;padding:6px 20px;background:var(--dark);color:#fff}
.sys-bar-in{display:flex;align-items:center;gap:26px;font-size:.68rem;letter-spacing:.01em}
.sys-bar-path{display:flex;align-items:center;gap:8px;color:#fff;font-weight:600;white-space:nowrap;font-family:var(--body)}
.sys-bar-mid{flex:1;color:rgba(255,255,255,.55);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sys-bar-count{color:rgba(255,255,255,.7);white-space:nowrap;font-family:var(--mono);font-size:.62rem}
.site-header{min-height:82px;padding:0 max(22px,calc((100vw - 1240px)/2));display:flex;align-items:center;gap:28px;background:rgba(251,250,247,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.brand{display:flex;align-items:center;gap:12px;min-width:220px}.brand>i{width:42px;height:42px;display:grid;place-items:center;background:var(--dark);border-radius:var(--radius-sm);overflow:hidden;padding:6px}.brand>span{display:flex;flex-direction:column;line-height:1.1}.brand b{font-family:var(--display);font-size:1.2rem;letter-spacing:-.01em}
.main-menu{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:2px;flex:1}
.main-menu a{display:inline-flex;align-items:baseline;gap:6px;font-size:.76rem;font-weight:600;letter-spacing:.005em;padding:9px 13px;border-radius:var(--radius-pill)}
.main-menu a i{font-family:var(--mono);font-style:normal;font-size:.58rem;color:var(--accent);font-weight:600}
.main-menu a:hover{background:var(--accent-soft);color:var(--accent)}
.menu-toggle{display:none;border:0;background:none;margin-left:auto}.menu-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px;border-radius:2px}
.section{padding:110px 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:60px;margin-bottom:44px}.section-head>div{max-width:760px}.section-head h1,.section-head h2{font-size:clamp(2.3rem,4vw,3.4rem);margin:12px 0 0}.section-head>p{max-width:400px;color:var(--muted);font-size:.88rem}.section-head>a{font-size:.72rem;font-weight:700;border-bottom:1px solid currentColor;padding-bottom:5px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:17px 32px;font-size:.9375rem;font-weight:600;letter-spacing:0;border-radius:var(--radius-pill);transition:.12s cubic-bezier(.455,.03,.515,.955)}
.btn--accent{background:var(--accent);color:#fff;border:1px solid var(--accent)}.btn--accent:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn--ghost{border:1px solid rgba(255,255,255,.4);color:#fff}.btn--ghost:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.has-motion .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}.has-motion .reveal.visible{opacity:1;transform:none}
.has-motion .reveal-l{opacity:0;transform:translateX(-26px)}.has-motion .reveal-l.visible{opacity:1;transform:none}
.has-motion .reveal-r{opacity:0;transform:translateX(26px)}.has-motion .reveal-r.visible{opacity:1;transform:none}
.reveal-stagger.visible .reveal-item{transition-delay:calc(var(--i,0) * 70ms)}

/* ===== AMBIENT HERO MOTION — Ken Burns zoom + staggered rise-in on load =====
   Timings match the reference (meteodesforets.fr): 0.9-1.1s ease-out rise per
   element with a 0.15s-increment stagger, continuous slow background zoom.
   Runs automatically on page load (hero is above the fold, no scroll needed). */
.hx-hero{overflow:hidden}
@keyframes heroKB{0%{transform:scale(1)}100%{transform:scale(1.08)}}
.hx-hero:before{content:"";position:absolute;inset:0;background-image:var(--bgimg);background-size:cover;background-position:center;animation:heroKB 22s ease-in-out infinite alternate;z-index:0}
@keyframes heroRise{0%{opacity:0;transform:translateY(22px)}100%{opacity:1;transform:translateY(0)}}
.hx-hero-in .eyebrow-dash{animation:heroRise .9s ease-out .15s both}
.hx-hero-in h1{animation:heroRise 1.1s ease-out .3s both}
.hx-hero-dek{animation:heroRise 1.1s ease-out .5s both}
.hx-hero-actions{animation:heroRise 1.1s ease-out .7s both}
.hx-hero-stats{animation:heroRise 1.1s ease-out .9s both}

/* ===== LIVE PULSE DOT — reuses the existing .sys-dot marker ===== */
.sys-dot{position:relative}
.sys-dot:after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--accent);animation:sysPulse 2s ease-out infinite}
@keyframes sysPulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(2.6);opacity:0}}

@media(prefers-reduced-motion:reduce){
  .hx-hero:before,.hx-hero-in .eyebrow-dash,.hx-hero-in h1,.hx-hero-dek,.hx-hero-actions,.hx-hero-stats{animation:none}
  .sys-dot:after{animation:none;display:none}
}
.back-top{position:fixed;right:22px;bottom:22px;width:44px;height:44px;border:0;border-radius:50%;background:var(--dark);color:#fff;opacity:0;pointer-events:none;transform:translateY(10px);transition:.25s;z-index:40;box-shadow:var(--shadow-sm)}.back-top.show{opacity:1;pointer-events:auto;transform:none}

/* ===== FOOTER ===== */
.site-footer{padding:72px 0 24px;background:var(--dark);color:#C6C9E8;position:relative}.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1.4fr 1fr;gap:45px}
.brand--footer{min-width:0;color:#fff}.brand--footer>i{background:rgba(255,255,255,.06)}
.footer-about p{max-width:390px;color:#9EA2C8;font-size:.78rem}
.site-footer h4{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:#AEB1FA;font-weight:600;margin:0 0 16px}
.site-footer ul{list-style:none;margin:0;padding:0}.site-footer li{font-size:.76rem;margin:10px 0}.site-footer li a:hover{color:#fff}
.footer-partners ul{columns:2}
.footer-bottom{display:flex;justify-content:space-between;margin-top:48px;padding-top:22px;border-top:1px solid rgba(174,177,250,.14);font-size:.68rem;color:#7477A6}
.footer-status{display:flex;align-items:center;gap:8px}

/* ===== HERO — full-bleed photo, single column, dash eyebrow, italic accent
   word in the headline. Modeled directly on the reference site's actual
   composition (one image, one dark gradient scrim, text laid straight on
   top) instead of the earlier two-panel split. ===== */
.eyebrow-dash{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--accent)}
.eyebrow-dash:before{content:"";width:30px;height:1px;background:currentColor;opacity:.55}
.eyebrow-dash--light{color:#fff}
.hx-hero{position:relative;min-height:min(92vh,860px);display:flex;flex-direction:column;justify-content:center;background-size:cover;background-position:center;overflow:hidden}
.hx-hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,12,16,.35) 0%,rgba(10,12,16,.55) 55%,rgba(10,12,16,.88) 100%)}
/* ===== POWER-FLOW LINES — decorative PCB-style circuit traces in the hero,
   with a glowing dot traveling the path in a loop (simulates current flow). ===== */
.power-lines{position:absolute;inset:0;z-index:1;opacity:.5;pointer-events:none}
.power-lines svg{width:100%;height:100%}
.pline{fill:none;stroke:rgba(242,183,5,.28);stroke-width:1.5}
.pline-b{stroke:rgba(242,183,5,.16)}
.pdot{fill:var(--accent);filter:drop-shadow(0 0 6px var(--accent)) drop-shadow(0 0 12px rgba(242,183,5,.7))}
.hx-hero-in{position:relative;z-index:2;padding:120px 0 70px;color:#fff}
.hx-hero-in h1{font-size:clamp(2.6rem,5.4vw,4.4rem);max-width:900px;margin:20px 0 22px;font-weight:700;letter-spacing:-.015em}
.hx-hero-in h1 em{font-style:italic;color:var(--accent2,#B7B9FF);font-weight:600}
.hx-hero-dek{max-width:520px;color:rgba(255,255,255,.82);font-size:1.06rem}
.hx-hero-actions{display:flex;gap:12px;margin:32px 0 0;flex-wrap:wrap}
.hx-hero-stats{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.16)}
.hx-hero-stats-row{display:flex;flex-wrap:wrap;gap:0;padding:22px 0}
.hx-hero-stat{display:flex;align-items:baseline;gap:9px;padding:6px 26px;border-left:1px solid rgba(255,255,255,.16)}
.hx-hero-stat:first-child{border-left:0;padding-left:0}
.hx-hero-stat i{font-family:var(--mono);font-size:.58rem;color:rgba(255,255,255,.5);font-style:normal}
.hx-hero-stat b{font-family:var(--display);font-size:1.15rem;color:#fff;font-weight:700}
.hx-hero-stat span{font-size:.72rem;color:rgba(255,255,255,.66)}
.hx-hero-stat b{font-family:var(--display);font-size:1.5rem;color:#fff;font-weight:700}
.hx-hero-stat span{font-size:.66rem;color:rgba(255,255,255,.6)}

/* ===== STAT BAND : animated counters ===== */
.stats-band{padding:64px 0;background:var(--paper);border-bottom:1px solid var(--line)}
.stats-band-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.stats-band-item{text-align:center;padding:0 20px;border-left:1px solid var(--line)}
.stats-band-item:first-child{border-left:0}
.stats-band-num{font-family:var(--display);font-size:clamp(2.2rem,4.4vw,3.2rem);font-weight:800;color:var(--dark)}
.stats-band-num span{color:var(--accent)}
.stats-band-item p{margin:6px 0 0;font-size:.8rem;color:var(--muted)}

/* ===== SIMULATEUR DE COMPENSATION RÉACTIVE : live-feeling tabbed widget with
   animated circular gauges (control-room dashboard aesthetic). ===== */
.simulateur{padding:100px 0;background:var(--bg)}
.simulateur-source{font-size:.74rem;color:var(--muted);margin-top:8px}
.simulateur-card{margin-top:36px;background:var(--dark);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden;border:1px solid rgba(255,255,255,.06)}
.simulateur-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:16px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.08)}
.simulateur-tab{border:0;background:transparent;padding:11px 20px;border-radius:var(--radius-pill);font-family:var(--body);font-weight:700;font-size:.82rem;color:rgba(255,255,255,.55);cursor:pointer;transition:.2s;display:flex;align-items:center;gap:8px}
.simulateur-tab small{font-family:var(--mono);font-weight:500;font-size:.62rem;opacity:.7}
.simulateur-tab:hover{color:#fff}
.simulateur-tab.is-active{background:var(--accent);color:var(--dark);box-shadow:var(--shadow-sm)}
.simulateur-panels{padding:44px 42px 48px}
.simulateur-panel{display:none}
.simulateur-panel.is-active{display:block}
.simulateur-panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:8px;flex-wrap:wrap}
.simulateur-panel-head h3{font-size:1.7rem;margin:0;color:#fff}
.simulateur-panel-head span{font-family:var(--mono);font-size:.7rem;color:rgba(255,255,255,.5)}
.gauge-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:30px}
.gauge{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative}
.gauge-svg{width:100%;max-width:132px;transform:rotate(-90deg)}
.gauge-track{fill:none;stroke:rgba(255,255,255,.1);stroke-width:8}
.gauge-fill{fill:none;stroke:var(--accent);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset 1.4s cubic-bezier(.16,.8,.2,1);filter:drop-shadow(0 0 6px rgba(242,183,5,.55))}
.gauge-readout{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:baseline;gap:2px}
.gauge-readout b{font-family:var(--display);font-size:1.9rem;font-weight:800;color:#fff}
.gauge-readout span{font-size:.7rem;color:rgba(255,255,255,.55)}
.gauge-label{margin:14px 0 0;font-size:.76rem;color:rgba(255,255,255,.68);max-width:150px;line-height:1.35}

/* ===== QUICK CATEGORY NAV ===== */
.cat-nav{padding:26px 0;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow-x:auto}
.cat-nav-row{display:flex;gap:10px;width:max-content}
.cat-nav-row a{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;padding:10px 16px;border-radius:var(--radius-pill);background:var(--light);color:var(--ink);white-space:nowrap}
.cat-nav-row a:hover{background:var(--accent);color:#fff}
.cat-nav-row a svg{width:16px;height:16px}

/* ===== ABOUT ===== */
.hx-about{padding:110px 0;background:var(--paper)}
.hx-about-grid{display:grid;grid-template-columns:44% 56%;gap:70px;align-items:center}
.hx-about-photo{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.hx-about-photo img{width:100%;aspect-ratio:4/3.4;object-fit:cover}
.hx-about-photo-tag{position:absolute;left:18px;bottom:18px;font-family:var(--mono);font-size:.62rem;color:#fff;background:rgba(16,19,31,.6);backdrop-filter:blur(6px);border-radius:var(--radius-pill);padding:6px 13px;letter-spacing:.03em}
.hx-about-copy h2{font-size:clamp(1.8rem,3vw,2.5rem);margin:14px 0 20px;max-width:560px}
.hx-about-copy p{color:var(--muted);font-size:.94rem;max-width:600px}
.hx-about-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}
.hx-about-fields>div{padding:18px 20px;border-radius:var(--radius-md);background:var(--light)}
.hx-about-fields dt{font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0}
.hx-about-fields dd{font-family:var(--display);font-size:1.5rem;font-weight:700;color:var(--dark);margin:5px 0 0}

/* ===== CATEGORY HUB BLOCKS ===== */
.cat-hub{padding:96px 0}
.cat-hub--tint{background:var(--paper)}
.cat-hub-top{display:flex;gap:34px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin-bottom:26px}
.cat-hub-heading{display:flex;gap:20px;align-items:flex-start;max-width:680px}
.cat-hub-icon{flex:none;width:56px;height:56px;display:grid;place-items:center;background:var(--dark);color:var(--accent);border-radius:var(--radius-md)}
.cat-hub-icon svg{width:26px;height:26px}
.cat-hub-heading h2{font-size:clamp(1.7rem,2.6vw,2.3rem);margin:12px 0 8px}
.cat-hub-heading p{color:var(--muted);font-size:.9rem;margin:0;max-width:520px}
.cat-hub-cta{flex:none;font-size:.76rem;font-weight:700;padding:12px 20px;border-radius:var(--radius-pill);background:var(--light);color:var(--dark);white-space:nowrap}
.cat-hub-cta:hover{background:var(--accent);color:#fff}
.cat-hub-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;margin-bottom:28px}
.cat-hub-chip{font-size:.76rem;font-weight:600;padding:8px 14px;border-radius:var(--radius-pill);background:var(--light);color:var(--ink);border:1px solid var(--line)}
.cat-hub-stats{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:34px}
.cat-hub-stat{padding:14px 18px;border-radius:var(--radius-md);background:var(--accent-soft-2);min-width:150px}
.cat-hub-stat b{display:block;font-family:var(--display);font-size:1.3rem;color:var(--dark)}
.cat-hub-stat span{font-size:.68rem;color:var(--muted)}
.cat-hub-row{display:flex;gap:18px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x proximity}
.cat-hub-row::-webkit-scrollbar{height:6px}.cat-hub-row::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
/* .cat-hub-card/-photo/-body are <a>/<span> — display:block is required or
   every block-level rule below (height, padding, card framing) silently
   no-ops on the default inline box, which is exactly what was happening:
   oversized unframed photos with no visible title/date underneath. */
.cat-hub-card{display:block;scroll-snap-align:start;flex:0 0 300px;background:var(--paper);border-radius:var(--radius-md);overflow:hidden;box-shadow:0 1px 0 rgba(16,19,31,.04),0 12px 28px -16px rgba(16,19,31,.22);transition:.25s;border:none}
.cat-hub--tint .cat-hub-card{background:var(--bg)}
.cat-hub-card:hover{transform:translateY(-6px);box-shadow:0 1px 0 rgba(16,19,31,.04),0 20px 40px -18px rgba(16,19,31,.3)}
.cat-hub-card-photo{display:block;position:relative;height:160px;background:var(--dark);overflow:hidden}
.cat-hub-card-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:.4s;border-radius:0}
.cat-hub-card:hover .cat-hub-card-photo img{transform:scale(1.06)}
.cat-hub-card-tag{position:absolute;left:12px;top:12px;z-index:2;display:inline-block;background:rgba(16,19,31,.9);color:#fff;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:6px 12px;border-radius:var(--radius-pill)}
.cat-hub-card-body{display:block;padding:18px 20px 20px}
.cat-hub-card-body small{display:block;font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);font-weight:600}
.cat-hub-card-body h3{font-size:1rem;margin:9px 0 10px;line-height:1.32;font-weight:700;color:var(--ink)}
.cat-hub-card-body b{display:block;font-size:.68rem;font-weight:700;color:var(--accent)}

/* ===== CATEGORY VARIANT 1 : full-bleed photo banner (chapter-cover style) ===== */
.cat-hub--v1{padding:0 0 96px}
.cat-banner{position:relative;padding:100px 0;background-size:cover;background-position:center;overflow:hidden;margin-bottom:56px}
.cat-banner:before{content:"";position:absolute;inset:0;background-image:var(--bgimg);background-size:cover;background-position:center;z-index:0}
.cat-banner-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(10,12,22,.92) 30%,rgba(10,12,22,.55) 75%)}
.cat-banner-in{position:relative;z-index:2;max-width:640px;color:#fff}
.pill-badge{display:inline-block;font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(18,18,20,.55);border-radius:var(--radius-pill);padding:7px 16px;margin-bottom:16px}
.cat-banner-in h2{font-size:clamp(2rem,3.6vw,2.9rem);margin:0 0 14px}
.cat-banner-in>p{color:rgba(255,255,255,.78);font-size:.95rem;max-width:520px}
.cat-banner-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;margin-bottom:20px}
.cat-hub-chip--dark{background:rgba(18,18,20,.55);color:#fff;border-color:rgba(255,255,255,.18)}
.cat-banner-stats{display:flex;gap:14px;margin:22px 0 28px;flex-wrap:wrap}
.cat-banner-stat{padding:12px 18px;border-radius:var(--radius-md);background:rgba(18,18,20,.5);min-width:150px}
.cat-banner-stat b{display:block;font-family:var(--display);font-size:1.15rem}
.cat-banner-stat span{font-size:.68rem;color:rgba(255,255,255,.6)}
.cat-banner-cta{display:inline-flex;align-items:center;padding:14px 26px;border-radius:var(--radius-pill);background:var(--accent);color:#fff;font-weight:700;font-size:.8rem}
.cat-banner-cta:hover{filter:brightness(1.1)}

/* ===== CATEGORY VARIANT 2 : split (text+chips / featured photo), compact list below ===== */
.cat-split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;margin-bottom:20px}
.cat-split-copy .eyebrow{margin-bottom:12px}
.cat-split-copy h2{font-size:clamp(1.7rem,2.6vw,2.3rem);margin:0 0 10px}
.cat-split-copy p{color:var(--muted);font-size:.9rem;max-width:460px}
.cat-split-copy .cat-hub-chips{margin-top:20px;margin-bottom:20px}
.cat-split-photo{display:block;position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);aspect-ratio:4/3}
.cat-split-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:.4s}
.cat-split-photo:hover img{transform:scale(1.05)}
.cat-split-photo-cap{position:absolute;left:0;right:0;bottom:0;padding:26px 22px 20px;background:linear-gradient(0deg,rgba(10,12,22,.82),transparent);color:#fff}
.cat-split-photo-cap small{display:block;font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;color:rgba(255,255,255,.7);margin-bottom:6px}
.cat-split-photo-cap h3{font-size:1rem;margin:0}
.cat-list{border-top:1px solid var(--line)}
.cat-list-row{display:flex;align-items:center;gap:20px;padding:16px 4px;border-bottom:1px solid var(--line)}
.cat-list-date{font-family:var(--mono);font-size:.68rem;color:var(--muted);flex:none;width:90px}
.cat-list-title{flex:1;font-weight:700;font-size:.92rem;color:var(--ink)}
.cat-list-arrow{flex:none;color:var(--accent);opacity:0;transition:.2s}
.cat-list-row:hover .cat-list-arrow{opacity:1;transform:translateX(3px)}

/* ===== CATEGORY VARIANT 3 : dense numbered ledger ===== */
.cat-ledger-head{display:flex;gap:34px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin-bottom:22px}
.cat-ledger{border-top:1px solid var(--line)}
.cat-ledger-row{display:flex;align-items:center;gap:18px;padding:16px 4px;border-bottom:1px solid var(--line)}
.cat-ledger-row i{flex:none;font-family:var(--mono);font-size:.72rem;font-style:normal;color:var(--accent);font-weight:700;width:26px}
.cat-ledger-title{flex:1;font-weight:700;font-size:.92rem;color:var(--ink)}
.cat-ledger-date{flex:none;font-family:var(--mono);font-size:.66rem;color:var(--muted)}
.cat-ledger-thumb{flex:none;display:block;width:52px;height:52px;border-radius:var(--radius-sm);overflow:hidden;background:var(--light)}
.cat-ledger-thumb img{display:block;width:100%;height:100%;object-fit:cover}

/* ===== IMAGE / TEXT BLOCKS ===== */
.hx-it{padding:96px 0;background:var(--paper)}
.hx-it-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.hx-it--image-right .hx-it-grid{direction:rtl}.hx-it--image-right .hx-it-grid>*{direction:ltr}
.hx-it-copy h2{font-size:clamp(1.7rem,2.7vw,2.3rem);margin:14px 0 16px;max-width:480px}
.hx-it-copy p{color:var(--muted);font-size:.92rem;max-width:480px}
.hx-it-photo{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.hx-it-photo img{width:100%;object-fit:cover;aspect-ratio:5/4}
.hx-it-tag{position:absolute;left:16px;bottom:16px;font-family:var(--mono);font-size:.62rem;color:#fff;background:rgba(16,19,31,.6);backdrop-filter:blur(6px);border-radius:var(--radius-pill);padding:6px 13px;letter-spacing:.03em}

/* ===== TIMELINE ===== */
.timeline{padding:100px 0;background:var(--dark);color:#fff;overflow:hidden}
.timeline .section-head h2{color:#fff}
.timeline .section-head p{color:rgba(255,255,255,.6)}
.timeline-row{display:flex;gap:22px;overflow-x:auto;padding:8px 0 18px;scroll-snap-type:x mandatory}
.timeline-row::-webkit-scrollbar{height:6px}.timeline-row::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:4px}
.timeline-card{scroll-snap-align:start;scroll-snap-stop:always;flex:0 0 270px;background:rgba(255,255,255,.05);border:1px solid rgba(174,177,250,.2);border-radius:var(--radius-md);padding:24px 22px}
.timeline-card b{display:block;font-family:var(--display);font-size:1.9rem;color:var(--accent);margin-bottom:10px}
.timeline-card h3{font-size:1rem;margin:0 0 10px;color:#fff}
.timeline-card p{font-size:.8rem;color:rgba(255,255,255,.65);margin:0}

/* ===================================================================
 * WIDGET VARIANT SYSTEM — comparateur (bars/stats/matrix) + timeline
 * (zigzag/axis) alternate structural presentations, so the "comparateur"
 * and "timeline" homepage widgets don't render identically on every
 * boost-batch site. See bt_render_comparateur()/bt_render_timeline() in
 * home-render.php — variant is picked per-site, not per-visit.
 * =================================================================== */

/* ---- shared horizontal-scroll affordance : mandatory scroll-snap (set
   on .timeline-row/.tl-axis-scroll above/below) means an interaction
   always rests on a full card/item boundary, and this fade-mask (toggled
   via .is-scrolled/.is-end, set by the generic [data-hscroll] handler in
   site.js) turns any still-partially-visible edge item into an
   intentional "more to scroll" cue instead of an abrupt hard cut. */
[data-hscroll]{position:relative}
[data-hscroll]::before,[data-hscroll]::after{content:"";position:absolute;top:0;bottom:18px;width:64px;pointer-events:none;z-index:2;opacity:0;transition:opacity .3s}
[data-hscroll]::before{left:0;background:linear-gradient(to right,var(--dark),transparent)}
[data-hscroll]::after{right:0;background:linear-gradient(to left,var(--dark),transparent)}
[data-hscroll].is-scrolled::before{opacity:1}
[data-hscroll]:not(.is-end)::after{opacity:1}
.timeline-viewport{position:relative}

/* ---- COMPARATEUR variant 1 : horizontal progress bars, big numbers ---- */
.cmp-bar-list{display:flex;flex-direction:column;gap:20px;margin-top:30px}
.cmp-bar-item-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:8px}
.cmp-bar-label{font-size:.82rem;color:rgba(255,255,255,.75);font-weight:600}
.cmp-bar-num{font-family:var(--display);font-size:1.5rem;font-weight:800;color:#fff}
.cmp-bar-track{height:10px;border-radius:var(--radius-pill);background:rgba(255,255,255,.1);overflow:hidden}
.cmp-bar-fill{display:block;height:100%;width:0;border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width 1.2s cubic-bezier(.16,.8,.2,1)}

/* ---- COMPARATEUR variant 2 : big-number stat-cluster grid, no progress
   visual at all — reads like a stat-sheet, not a dashboard. ---- */
.cmp-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:30px}
.cmp-stat-cell{padding:4px 20px;border-left:1px solid rgba(255,255,255,.12)}
.cmp-stat-cell:first-child{border-left:0;padding-left:0}
.cmp-stat-num-row{display:flex;align-items:baseline;gap:4px}
.cmp-stat-num{font-family:var(--display);font-size:2.6rem;font-weight:800;color:#fff;line-height:1}
.cmp-stat-suffix{font-family:var(--mono);font-size:.72rem;color:rgba(255,255,255,.45)}
.cmp-stat-label{margin:10px 0 0;font-size:.76rem;color:rgba(255,255,255,.65);line-height:1.35}

/* ---- COMPARATEUR variant 3 : comparison matrix table — every item shown
   at once as columns, criteria as rows, no tabs (deliberately the odd one
   out: a data table, not a card). ---- */
.cmp-matrix-card{margin-top:36px;background:var(--dark);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1px solid rgba(255,255,255,.06);padding:8px}
.cmp-matrix-scroll{overflow-x:auto}
.cmp-matrix{width:100%;border-collapse:collapse;min-width:640px}
.cmp-matrix th,.cmp-matrix td{padding:16px 18px;text-align:left;border-bottom:1px solid rgba(255,255,255,.08)}
.cmp-matrix thead th{vertical-align:bottom;font-weight:600}
.cmp-matrix-corner{min-width:150px}
.cmp-matrix-th-name{display:block;font-family:var(--display);font-size:1rem;color:#fff;font-weight:700}
.cmp-matrix thead th small{display:block;margin-top:4px;font-family:var(--mono);font-size:.62rem;font-weight:500;color:rgba(255,255,255,.5);white-space:normal;max-width:170px}
.cmp-matrix tbody th{font-size:.78rem;font-weight:600;color:rgba(255,255,255,.75);white-space:nowrap}
.cmp-matrix tbody tr:last-child th,.cmp-matrix tbody tr:last-child td{border-bottom:0}
.cmp-matrix-bar{display:flex;align-items:center;gap:10px;min-width:110px}
.cmp-matrix-bar-track{flex:1;height:6px;border-radius:var(--radius-pill);background:rgba(255,255,255,.1);overflow:hidden;display:block}
.cmp-matrix-bar-fill{display:block;height:100%;width:0;border-radius:var(--radius-pill);background:var(--accent);transition:width 1.1s cubic-bezier(.16,.8,.2,1)}
.cmp-matrix-num{font-family:var(--mono);font-size:.74rem;color:#fff;min-width:24px;text-align:right}

/* ---- TIMELINE variant 1 : vertical alternating zigzag down a central
   spine — no horizontal scroll at all, so the overflow-clip bug class
   structurally cannot recur here. ---- */
.tl-zigzag{position:relative;max-width:920px;margin:0 auto;padding:20px 0}
.tl-zigzag-spine{position:absolute;left:50%;top:0;bottom:0;width:2px;background:rgba(255,255,255,.14);transform:translateX(-50%)}
.tl-zigzag-item{position:relative;display:grid;grid-template-columns:1fr 64px 1fr;align-items:start;gap:0 28px;margin-bottom:40px}
.tl-zigzag-item:last-child{margin-bottom:0}
.tl-zigzag-dot{grid-column:2;justify-self:center;width:64px;height:64px;border-radius:50%;background:var(--accent);display:grid;place-items:center;box-shadow:0 0 0 6px rgba(255,255,255,.06);z-index:1}
.tl-zigzag-dot span{font-family:var(--mono);font-size:.72rem;font-weight:700;color:#fff}
.tl-zigzag-card{grid-row:1;background:rgba(255,255,255,.05);border:1px solid rgba(174,177,250,.2);border-radius:var(--radius-md);padding:22px 24px}
.tl-zigzag-card h3{font-size:1rem;margin:0 0 8px;color:#fff}
.tl-zigzag-card p{font-size:.8rem;color:rgba(255,255,255,.65);margin:0}
.tl-zigzag-item--l .tl-zigzag-card{grid-column:1;text-align:right}
.tl-zigzag-item--r .tl-zigzag-card{grid-column:3}

/* ---- TIMELINE variant 2 : compact horizontal ruler/axis, dots with
   stacked labels alternating above/below the line — thin editorial
   infographic reading, no boxed cards. Uses the same [data-hscroll]
   mandatory-snap + fade-mask fix as variant 0. ---- */
.tl-axis-viewport{position:relative}
.tl-axis-scroll{overflow-x:auto;scroll-snap-type:x mandatory}
.tl-axis-scroll::-webkit-scrollbar{height:6px}.tl-axis-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:4px}
.tl-axis{position:relative;display:flex;align-items:center;width:max-content;padding:140px 30px}
.tl-axis::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:rgba(255,255,255,.16)}
.tl-axis-item{position:relative;flex:0 0 170px;scroll-snap-align:center;scroll-snap-stop:always;display:flex;justify-content:center}
.tl-axis-stem{position:absolute;left:50%;width:1px;background:rgba(255,255,255,.25);transform:translateX(-50%)}
.tl-axis-item--up .tl-axis-stem{bottom:50%;height:46px}
.tl-axis-item--down .tl-axis-stem{top:50%;height:46px}
.tl-axis-dot{position:absolute;left:50%;top:50%;width:11px;height:11px;border-radius:50%;background:var(--accent);transform:translate(-50%,-50%);z-index:1;box-shadow:0 0 0 4px var(--dark)}
.tl-axis-label{position:absolute;left:50%;width:170px;transform:translateX(-50%);text-align:center;padding:0 8px}
.tl-axis-item--up .tl-axis-label{bottom:calc(50% + 46px)}
.tl-axis-item--down .tl-axis-label{top:calc(50% + 46px)}
.tl-axis-label b{display:block;font-family:var(--display);font-size:1.3rem;color:var(--accent);margin-bottom:4px}
.tl-axis-label h3{font-size:.8rem;margin:0 0 6px;color:#fff;line-height:1.25}
.tl-axis-label p{font-size:.68rem;color:rgba(255,255,255,.55);margin:0;line-height:1.4}

/* ===== QUIZ ===== */
.quiz{padding:100px 0;background:var(--bg)}
.quiz-card{margin-top:36px;background:var(--paper);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1px solid var(--line);padding:40px 44px;max-width:760px;margin-left:auto;margin-right:auto}
.quiz-progress{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;font-family:var(--mono);font-size:.68rem;color:var(--muted)}
.quiz-progress-track{flex:1;height:6px;border-radius:var(--radius-pill);background:var(--light);margin:0 16px;overflow:hidden}
.quiz-progress-fill{height:100%;width:0;background:var(--accent);border-radius:var(--radius-pill);transition:width .4s}
.quiz-question{font-size:1.28rem;margin:0 0 24px;font-weight:700}
.quiz-options{display:grid;gap:12px}
.quiz-option{text-align:left;padding:15px 20px;border-radius:var(--radius-md);border:1px solid var(--line);background:var(--light);font-family:var(--body);font-size:.9rem;font-weight:600;color:var(--ink);cursor:pointer;transition:.18s}
.quiz-option:hover{border-color:var(--accent)}
.quiz-option.is-correct{background:#E6F7EE;border-color:#2FAE66;color:#1E7A48}
.quiz-option.is-wrong{background:#FCEBEA;border-color:#DD4B3E;color:#A6291D}
.quiz-option[disabled]{cursor:default}
.quiz-result{display:none;text-align:center}
.quiz-result.is-active{display:block}
.quiz-result b{display:block;font-family:var(--display);font-size:2.6rem;color:var(--accent);margin-bottom:8px}
.quiz-result p{color:var(--muted);font-size:.92rem;margin:0 0 22px}
.quiz-restart{border:0;background:var(--dark);color:#fff;padding:13px 26px;border-radius:var(--radius-pill);font-weight:700;font-size:.78rem;cursor:pointer}

/* ===== TESTIMONIAL MARQUEE ===== */
.marquee-section{padding:96px 0 106px;background:var(--paper);overflow:hidden}
.marquee-track{display:flex;gap:22px;width:max-content;animation:bt-marquee 46s linear infinite}
.marquee-track:hover{animation-play-state:paused}
@keyframes bt-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-card{flex:0 0 380px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-md);padding:26px 28px}
.marquee-card p{font-size:.9rem;line-height:1.6;margin:0 0 18px;color:var(--ink)}
.marquee-card cite{font-style:normal;display:flex;flex-direction:column;gap:2px}
.marquee-card cite b{font-size:.82rem}
.marquee-card cite span{font-size:.68rem;color:var(--muted)}

/* ===== FLAGSHIP ===== */
.hx-fs{padding:104px 0;background:var(--paper)}
.hx-fs-grid{display:grid;grid-template-columns:46% 54%;gap:56px;align-items:center}
.hx-fs-photo{position:relative;display:block;overflow:hidden;border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}
.hx-fs-photo img{width:100%;aspect-ratio:6/5;object-fit:cover}
.hx-fs-photo span{position:absolute;left:16px;top:16px;background:var(--accent);color:#fff;font-family:var(--mono);font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:8px 13px;border-radius:var(--radius-pill)}
.hx-fs-copy h2{font-size:clamp(1.8rem,3.1vw,2.5rem);margin:14px 0 16px}
.hx-fs-copy>p{color:var(--muted);font-size:.92rem;max-width:520px}
.hx-fs-refs{margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.hx-fs-refs>span{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
.hx-fs-ref-list{list-style:none;margin:16px 0 0;padding:0;columns:2;column-gap:14px}
.hx-fs-ref-list li{margin:0 0 8px;break-inside:avoid}
.hx-fs-ref-list a{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.7rem;font-weight:600;background:var(--light);border-radius:var(--radius-pill);color:var(--ink);padding:9px 13px}
.hx-fs-ref-list a:hover{background:var(--accent-soft);color:var(--accent)}
.hx-fs-ref-list a i{font-style:normal;color:var(--accent)}
.hx-fs-ref-list a b{margin-left:auto;font-weight:400;color:var(--muted)}

/* ===== NEWSLETTER ===== */
.hx-cli{padding:76px 0;background:var(--ink);color:#fff;border-radius:var(--radius-lg);margin:0 auto 90px;width:min(1200px,calc(100% - 40px))}
.hx-cli-in{display:flex;justify-content:space-between;align-items:center;gap:50px;padding:0 50px}
.hx-cli-in span{font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.12em;color:#AEB1FA}
.hx-cli-in h2{font-size:2.1rem;margin:8px 0}
.hx-cli-in p{font-size:.8rem;color:rgba(255,255,255,.6);max-width:420px}
.hx-cli-form{display:flex;align-items:center;background:rgba(255,255,255,.08);border-radius:var(--radius-pill);padding:6px 6px 6px 20px;min-width:400px}
.hx-cli-form input{border:0;background:none;padding:12px 4px;flex:1;color:#fff;font-size:.85rem;font-family:var(--body)}
.hx-cli-form input::placeholder{color:rgba(255,255,255,.4)}
.hx-cli-form button{border:0;background:var(--accent);color:#fff;font-weight:700;padding:12px 22px;border-radius:var(--radius-pill);font-family:var(--body);font-size:.78rem}

/* ===== ARCHIVE + ARTICLE PAGES ===== */
.archive-hero,.article-head{padding:64px 0 70px;background:var(--dark);color:#fff;position:relative}
.article-tag{display:inline-block;font-family:var(--mono);font-size:.64rem;color:#DCDDFC;background:rgba(255,255,255,.1);border-radius:var(--radius-pill);padding:6px 13px;margin-bottom:18px;letter-spacing:.03em}
.archive-hero nav,.article-head nav{display:flex;gap:8px;font-size:.72rem;color:rgba(255,255,255,.5);margin-bottom:30px}
.archive-hero .wrap{position:relative}
.archive-hero h1{font-size:clamp(2.5rem,5.4vw,4.2rem);margin:14px 0 20px;max-width:900px}
.archive-hero p{max-width:700px;color:rgba(255,255,255,.65)}
.archive-count{position:absolute;right:0;bottom:0;width:210px;padding:22px;background:var(--accent);color:#fff;display:flex;align-items:center;gap:14px;border-radius:var(--radius-md) 0 0 0}
.archive-count b{font-family:var(--display);font-size:2.4rem}.archive-count span{font-size:.64rem}
.archive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.archive-card{display:block;background:var(--paper);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--line);transition:.25s}
.archive-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.archive-card--large{grid-column:span 2}
.story-art{min-height:220px;background:var(--dark);position:relative;display:block;overflow:hidden}
.story-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:.4s}
.archive-card:hover .story-art img{transform:scale(1.05)}
.story-art i{position:absolute;left:14px;top:14px;font-family:var(--mono);font-style:normal;font-size:.68rem;color:#fff;background:rgba(16,19,31,.6);backdrop-filter:blur(6px);border-radius:var(--radius-pill);padding:6px 11px;z-index:2}
.archive-card .story-art{height:200px}.archive-card--large .story-art{height:290px}
.archive-card>span:last-child{display:block;padding:22px}
.archive-card h3{font-size:1.4rem;margin:9px 0;font-weight:700}.archive-card--large h3{font-size:2rem}
.archive-card p{font-size:.78rem;color:var(--muted)}
.archive-card small{font-family:var(--mono);font-size:.6rem;color:var(--accent);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.archive-cta{padding:68px 0;background:var(--accent);color:#fff;border-radius:var(--radius-lg);margin:20px auto 0;width:min(1200px,calc(100% - 40px))}
.archive-cta>div{display:flex;justify-content:space-between;align-items:center;gap:40px;padding:0 50px}
.archive-cta span{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.1em}
.archive-cta h2{font-size:2.1rem;margin:8px 0;color:#fff}
.archive-cta a{padding:14px 24px;background:var(--dark);color:#fff;font-size:.7rem;font-weight:700;border-radius:var(--radius-pill)}

.article-head-grid{display:grid;grid-template-columns:1fr 300px;gap:66px;align-items:end}
.article-head h1{font-size:clamp(2.3rem,5vw,3.8rem);margin:10px 0 20px}
.article-head-grid>div>p{max-width:800px;font-size:1.04rem;color:rgba(255,255,255,.72)}
.article-meta{display:flex;gap:14px;margin-top:22px;flex-wrap:wrap}
.article-meta span{background:rgba(255,255,255,.08);border-radius:var(--radius-pill);padding:8px 15px;font-size:.7rem;color:rgba(255,255,255,.8)}
.article-meta i{font-style:normal;color:#AEB1FA;text-transform:uppercase;letter-spacing:.06em;font-size:.6rem;margin-right:6px}
.article-head aside{padding:24px;background:rgba(255,255,255,.06);color:#fff;border-radius:var(--radius-md)}
.article-head aside>span,.article-sidebar>span{font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);font-weight:600}
.article-head aside ul{list-style:none;padding:0;margin:14px 0 0}
.article-head aside li{padding:10px 0 10px 20px;border-top:1px solid rgba(255,255,255,.1);font-size:.7rem;position:relative}
.article-head aside li:before{content:"→";position:absolute;left:0;color:var(--accent)}
.article-layout{display:grid;grid-template-columns:225px minmax(0,740px);gap:70px;justify-content:center;align-items:start;padding-top:64px;padding-bottom:104px}
.article-sidebar{position:sticky;top:100px;padding:22px;background:var(--paper);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);border:1px solid var(--line)}
.article-sidebar a{display:grid;grid-template-columns:28px 1fr;gap:7px;padding:10px 0;border-top:1px solid var(--line);font-size:.68rem}
.article-sidebar i{font-family:var(--mono);font-style:normal;color:var(--accent)}
.article-content{font-family:var(--body);font-size:1.06rem;line-height:1.85}
.article-content h2{font-size:2.1rem;margin:52px 0 18px;scroll-margin-top:110px;font-weight:700}
.article-content h3{font-size:1.4rem;margin-top:32px;font-weight:700}
.article-content h4{font-size:1.12rem;margin-top:26px;font-weight:700;font-family:var(--body)}
.article-content p{margin:0 0 22px}
.article-content li{margin:8px 0}
.article-content a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.article-content table{width:100%;border-collapse:collapse;margin:20px 0;font-size:.86rem;font-family:var(--body);border-radius:var(--radius-sm);overflow:hidden}
.article-content th,.article-content td{border:1px solid var(--line);padding:11px 13px;text-align:left}
.article-content th{background:var(--light);font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em}
.article-content blockquote{margin:28px 0;padding:22px 26px;background:var(--light);border-radius:var(--radius-md);border-left:3px solid var(--accent);font-style:italic}
.article-note{margin:44px 0;padding:26px;background:var(--dark);color:#fff;border-radius:var(--radius-md)}
.article-note span{font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent)}
.article-note p{font-family:var(--body);font-size:.82rem;margin:10px 0 0;color:rgba(255,255,255,.72)}
.checklist{padding:26px;background:var(--light);margin-top:28px;border-radius:var(--radius-md)}
.checklist h3{margin-top:0;font-family:var(--mono);font-size:.85rem;text-transform:uppercase;letter-spacing:.04em}.checklist ul{list-style:none;padding:0}
.checklist li{font-family:var(--body);font-size:.76rem;border-top:1px solid var(--line);padding:11px 0;margin:0}
.checklist li:before{content:"→";color:var(--accent);margin-right:10px}
.related{background:var(--paper)}
.simple-page header{padding:68px 0;background:var(--dark);color:#fff}
.simple-page h1{font-size:3rem;margin:12px 0}
.simple-content{max-width:850px;padding-top:64px;padding-bottom:92px}
.simple-content h2{font-size:2.1rem;margin-top:44px}
.simple-content p{font-size:.95rem;color:#5C6178}
.error-page{min-height:70vh;display:grid;place-items:center;text-align:center;background:var(--dark);color:#fff}
.error-page>div>span{font-family:var(--mono);font-size:5rem;color:var(--accent)}
.error-page h1{font-size:2.3rem}

/* ===== FAQ ACCORDION ===== */
.faq-block{margin:52px 0 34px;padding:32px;background:var(--light);border-radius:var(--radius-lg)}
.faq-block>h2{margin-top:0!important}
.faq-list{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.faq-item{background:var(--paper);border-radius:var(--radius-md);padding:0;overflow:hidden;box-shadow:var(--shadow-sm)}
.faq-item summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;font-family:var(--display);font-weight:700;font-size:1rem;color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-caret{flex:none;width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.05rem;transition:transform .25s}
.faq-item[open] .faq-caret{transform:rotate(45deg)}
.faq-answer{padding:0 22px 22px;font-size:.92rem;line-height:1.65;color:var(--muted)}
.faq-answer p{margin:0}

/* ===== CONDENSED WIDGET BAND : about / comparateur / timeline / testimonials
   / flagship callout folded into ONE section with tight internal rhythm,
   instead of five separate full-height stacked sections. Each cb-block still
   carries the meteodesforets card language (18px radius, soft double shadow,
   pill tags) so no widget is left generically rounded. ===== */
.condensed-band{background:var(--bg)}
.cb-block{padding:64px 0}
.cb-block+.cb-block{border-top:1px solid var(--line)}
.cb-about{padding-top:80px;background:var(--paper)}
.cb-timeline{background:var(--dark);color:#fff;padding:80px 0;overflow:hidden}
.cb-timeline .section-head h2{color:#fff}
.cb-timeline .section-head p{color:rgba(255,255,255,.6)}
.cb-timeline .eyebrow--light{color:#DCDDFC}
.cb-marquee{padding:64px 0;overflow:hidden;background:var(--paper)}
.cb-flagship{padding-bottom:80px;background:var(--paper)}

/* ===== RESPONSIVE ===== */
@media(max-width:1050px){
.main-menu{display:none}.menu-toggle{display:block}.site-header.open{flex-wrap:wrap;padding-bottom:18px}.site-header.open .main-menu{display:grid;grid-template-columns:repeat(2,1fr);order:3;width:100%;padding:15px 0}
.footer-grid{grid-template-columns:repeat(2,1fr)}
.hx-hero-grid{grid-template-columns:1fr;height:auto}.hx-hero{min-height:0}.hx-hero-photo{height:280px}.hx-hero-panel{padding:44px 26px}
.stats-band-grid{grid-template-columns:repeat(2,1fr);gap:24px}.stats-band-item{border-left:0;border-top:1px solid var(--line);padding-top:20px}.stats-band-item:nth-child(1),.stats-band-item:nth-child(2){border-top:0}
.comparateur-panels{padding:28px 22px 32px}.comparateur-bar-row{grid-template-columns:110px 1fr 40px;gap:10px}
.hx-about-grid{grid-template-columns:1fr;gap:52px}
.cat-hub-top{flex-direction:column}
.hx-it-grid{grid-template-columns:1fr}.hx-it--image-right .hx-it-grid{direction:ltr}
.hx-fs-grid{grid-template-columns:1fr}
.article-layout{grid-template-columns:200px minmax(0,640px);gap:40px}
.article-head-grid{grid-template-columns:1fr}
.archive-count{position:static;margin-top:30px;border-radius:var(--radius-md)}
.quiz-card{padding:30px 24px}
.hx-cli-in{padding:0 30px}
.cb-block{padding:48px 0}
.cb-about{padding-top:56px}
}
@media(max-width:700px){
.wrap{width:calc(100% - 28px)}
.sys-bar-mid{display:none}
.site-header{min-height:64px;padding:0 14px}.brand{min-width:0}
.section{padding:70px 0}.section-head{display:block}.section-head h1,.section-head h2{font-size:2.3rem}.section-head>p{font-size:.78rem}
.hx-hero-photo{height:220px}.hx-hero-stats{flex-direction:column}
.stats-band-grid{grid-template-columns:1fr 1fr;gap:20px}
.comparateur{padding:60px 0}.comparateur-tabs{overflow-x:auto;flex-wrap:nowrap}.comparateur-tab{white-space:nowrap}
.hx-about{padding:60px 0}.hx-about-fields{grid-template-columns:1fr}
.cat-hub{padding:56px 0}.cat-hub-card{flex-basis:250px}
.hx-it{padding:56px 0}
.timeline{padding:56px 0}.timeline-card{flex-basis:230px}
[data-hscroll]::before,[data-hscroll]::after{width:36px}
.cmp-stat-grid{grid-template-columns:1fr 1fr;row-gap:24px}
.cmp-stat-cell{border-left:1px solid rgba(255,255,255,.12);padding:4px 16px}
.cmp-stat-cell:nth-child(2n+1){border-left:0;padding-left:0}
.cmp-matrix{min-width:560px}.cmp-matrix th,.cmp-matrix td{padding:12px 14px}.cmp-matrix-corner{min-width:110px}
.tl-zigzag-spine{left:22px;transform:none}
.tl-zigzag-item{grid-template-columns:44px 1fr;gap:0 16px}
.tl-zigzag-dot{grid-column:1;width:44px;height:44px}
.tl-zigzag-dot span{font-size:.6rem}
.tl-zigzag-item--l .tl-zigzag-card,.tl-zigzag-item--r .tl-zigzag-card{grid-column:2;grid-row:1;text-align:left}
.tl-axis{padding:90px 20px}
.tl-axis-item{flex:0 0 130px}
.tl-axis-label{width:130px}
.tl-axis-item--up .tl-axis-stem,.tl-axis-item--down .tl-axis-stem{height:34px}
.tl-axis-item--up .tl-axis-label{bottom:calc(50% + 34px)}
.tl-axis-item--down .tl-axis-label{top:calc(50% + 34px)}
.tl-axis-label b{font-size:1.1rem}
.tl-axis-label h3{font-size:.74rem}
.tl-axis-label p{display:none}
.simulateur-panels{padding:28px 20px 32px}.gauge-row{grid-template-columns:1fr 1fr;gap:22px 14px}
.quiz{padding:56px 0}.quiz-card{padding:26px 18px}.quiz-question{font-size:1.05rem}
.marquee-section{padding:56px 0}.marquee-card{flex-basis:280px}
.hx-fs{padding:56px 0}
.hx-fs-ref-list{columns:1}
.hx-cli{margin-bottom:60px}.hx-cli-in{display:block;padding:0 26px}.hx-cli-form{min-width:0;margin-top:20px}
.footer-grid{grid-template-columns:1fr 1fr}.footer-about{grid-column:1/-1}.footer-partners ul{columns:1}.footer-bottom{display:block}
.archive-hero h1{font-size:2.3rem}.archive-grid{grid-template-columns:1fr}.archive-card--large{grid-column:auto}.archive-card--large .story-art{height:210px}.archive-card--large h3{font-size:1.5rem}
.archive-cta>div{display:block;padding:0 26px}.archive-cta h2{font-size:1.9rem}.archive-cta a{display:inline-block;margin-top:16px}
.article-head h1{font-size:2.3rem}.article-head-grid>div>p{font-size:1rem}
.article-layout{display:block;padding-top:40px;padding-bottom:64px}.article-sidebar{position:static;margin-bottom:32px}
.article-content{font-size:1rem}.article-content h2{font-size:1.8rem}
.simple-page h1{font-size:2.5rem}
}