/* Comparanimo, feuille de style partagée (premium, inspirée des codes Dalma) */
/* === Insight Engine : recherche interne + micro-sondage === */
.ly-search-sec{background:var(--bg-soft);padding:var(--sp) 0;}
.ly-search-wrap{max-width:640px;margin:0 auto;padding:0 18px;text-align:center;}
.ly-search-wrap h2{font-size:1.35rem;margin:0 0 4px;letter-spacing:-.02em;}
.ly-search-wrap p{color:var(--muted);margin:0 0 16px;font-size:.95rem;}
.ly-search-box{position:relative;}
#ly-search{-webkit-appearance:none;appearance:none;display:block;width:100%;box-sizing:border-box;padding:14px 18px;font-size:1rem;line-height:1.2;font-family:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:999px;box-shadow:var(--shadow-sm);}
#ly-search::-webkit-search-decoration,#ly-search::-webkit-search-cancel-button{-webkit-appearance:none;}
#ly-search:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-light);}
.ly-search-res{margin-top:10px;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;}
.ly-search-res a{display:block;padding:11px 16px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--border);font-size:.95rem;}
.ly-search-res a:last-child{border-bottom:none;}
.ly-search-res a:hover{background:var(--teal-soft);color:var(--teal-dark);}
.ly-search-empty{margin:0;padding:14px 16px;color:var(--muted);font-size:.92rem;}
.ly-poll{max-width:560px;margin:26px auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:20px 22px;}
.ly-poll-q{font-weight:700;font-size:1.02rem;margin:0 0 14px;color:var(--ink);}
.ly-poll-opts{display:flex;flex-direction:column;gap:8px;}
.ly-poll-opts button{text-align:left;padding:11px 15px;font-family:inherit;font-size:.95rem;color:var(--ink);background:var(--bg-soft);border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:background .15s,border-color .15s;}
.ly-poll-opts button:hover{background:var(--teal-soft);border-color:var(--teal);}
.ly-poll-thanks{margin:6px 0 0;color:var(--teal-dark);font-weight:600;font-size:.95rem;}
[data-theme="dark"] .ly-search-sec{background:var(--surface);}
[data-theme="dark"] #ly-search,[data-theme="dark"] .ly-search-res,[data-theme="dark"] .ly-poll{background:var(--surface);}
[data-theme="dark"] .ly-poll-opts button{background:var(--bg);color:var(--ink);}
:root {
  --teal: #0f766e;
  --teal-dark: #0b5a54;
  --teal-light: #d6f0e8;
  --teal-soft: #eef7f4;
  --ink: #16302a;
  --muted: #5b6b66;
  --bg: #f8f6f0;
  --surface: #ffffff;
  --bg-soft: #edf6f2;
  --accent: #f59e0b;
  --accent-dark: #d97706;
  --accent-soft: #fdf3e3;
  --border: #ece8dd;
  --radius: 16px;
  --radius-lg: 26px;
  --shadow-sm: 0 2px 14px rgba(16,48,42,.05);
  --shadow: 0 16px 46px rgba(16,48,42,.09);
  --shadow-teal: 0 16px 40px rgba(15,118,110,.18);
  --maxw: 1120px;
  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.7;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { line-height: 1.2; color: var(--ink); letter-spacing: -.02em; }
h1 { font-size: 2.6rem; font-weight: 800; margin: 0 0 .4em; }
h2 { font-size: 1.85rem; font-weight: 700; margin: 1.8em 0 .6em; }
h3 { font-size: 1.2rem; font-weight: 700; margin: 1.4em 0 .4em; }
p { margin: 0 0 1.1em; }
a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }
strong { font-weight: 700; }
img { max-width: 100%; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

/* Header */
.site-header {
  border-bottom: 1px solid var(--border);
  background: rgba(248,246,240,.82);
  backdrop-filter: saturate(140%) blur(12px);
  position: sticky; top: 0; z-index: 50;
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 58px; position: relative; padding-right: 60px; }
.logo { font-weight: 800; font-size: 1.45rem; color: var(--teal); text-decoration: none; letter-spacing: -.04em; }
.logo:hover { text-decoration: none; }
.logo span { color: var(--accent); }
.nav a { color: var(--ink); text-decoration: none; margin-left: 26px; font-weight: 600; font-size: .98rem; opacity: .85; }
.nav a:hover { color: var(--teal); opacity: 1; text-decoration: none; }
@media (max-width: 640px) {
  .site-header .container { height: auto; flex-wrap: wrap; padding: 12px 20px; row-gap: 8px; }
  .logo { font-size: 1.3rem; }
  .nav { width: 100%; display: flex; flex-wrap: wrap; gap: 8px 18px; }
  .nav a { margin-left: 0; font-size: .95rem; }
}

/* Hero */
.hero { background: linear-gradient(165deg, #eef7f4 0%, #f8f6f0 60%); padding: 76px 0 var(--sp); }
.hero h1 { font-size: 3rem; max-width: 16ch; }
.hero p.lead { font-size: 1.22rem; color: var(--muted); max-width: 56ch; }
@media (max-width: 640px) { .hero { padding: 44px 0 var(--sp); } .hero h1 { font-size: 2.05rem; } .hero p.lead { font-size: 1.08rem; } }

/* Buttons */
.btn {
  display: inline-block; background: var(--accent); color: #fff; text-decoration: none;
  padding: 15px 30px; border-radius: 999px; font-weight: 700; border: none; cursor: pointer;
  font-size: 1.02rem; margin: 6px 6px 0 0; box-shadow: 0 10px 24px rgba(245,158,11,.28);
  transition: transform .14s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(245,158,11,.36); text-decoration: none; }
.btn-secondary { background: var(--teal); box-shadow: var(--shadow-teal); }
.btn-secondary:hover { background: var(--teal-dark); }
.btn-ghost { background: transparent; color: var(--teal); border: 2px solid var(--teal); box-shadow: none; }
.btn-ghost:hover { background: var(--teal); color: #fff; }

/* Sections */
section { padding: var(--sp) 0; }
.section-pad { padding: var(--sp) 0; }
.bg-soft { background: var(--bg-soft); }
.center { text-align: center; }
.lead-center { max-width: 62ch; margin: 0 auto 2em; text-align: center; color: var(--muted); font-size: 1.1rem; }
@media (max-width: 640px) { .section-pad { padding: var(--sp) 0; } }

/* Cards grid */
.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 880px) { .grid-3 { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 600px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 30px; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .25s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card h3 { margin-top: .2em; }
.card .emoji { font-size: 2.1rem; }
.card a.card-link { text-decoration: none; color: var(--teal); font-weight: 700; }
.card a.card-link:hover { text-decoration: underline; }

/* Simulator */
.simulator { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 38px; box-shadow: var(--shadow); max-width: 640px; margin: 0 auto; }
.simulator label { display: block; font-weight: 700; margin: 22px 0 8px; color: var(--ink); font-size: .97rem; }
.simulator label:first-of-type { margin-top: 0; }
.simulator input[type="number"], .simulator input[type="text"], .simulator select {
  width: 100%; padding: 15px 17px; border-radius: 14px; border: 1.5px solid var(--border);
  background: #fff; font-size: 1.05rem; font-weight: 600; color: var(--ink); font-family: var(--font);
  transition: border-color .15s ease, box-shadow .15s ease; -webkit-appearance: none; -moz-appearance: textfield; appearance: none;
}
.simulator select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 15px; padding-right: 44px; cursor: pointer;
}
.simulator input:focus, .simulator select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(15,118,110,.14); }
.simulator input[type="range"] { width: 100%; margin-top: 8px; accent-color: var(--teal); height: 6px; }
.sim-result { margin-top: 30px; padding: 32px 24px; background: linear-gradient(135deg, var(--teal), var(--teal-dark)); border-radius: 20px; text-align: center; color: #e9fff8; box-shadow: var(--shadow-teal); }
.sim-result > div:first-child { font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; opacity: .85; }
.sim-result .amount { font-size: 3.1rem; font-weight: 800; color: #fff; margin: 8px 0 4px; line-height: 1.05; letter-spacing: -.03em; }
.sim-note { font-size: .85rem; color: var(--muted); margin-top: 8px; }
.sim-result .sim-note { color: #d3f3ec; }
.sim-result .sim-note strong { color: #fff; }

/* Quiz chips */
.quiz-q { font-weight: 700; margin: 22px 0 10px; font-size: 1.02rem; }
.quiz-q:first-of-type { margin-top: 0; }
.chip-group { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { border: 1.5px solid var(--border); background: #fff; color: var(--ink); border-radius: 999px; padding: 11px 20px; font-weight: 600; font-size: .98rem; cursor: pointer; transition: all .15s ease; font-family: inherit; }
.chip:hover { border-color: var(--teal); }
.chip.active { background: var(--teal); border-color: var(--teal); color: #fff; box-shadow: 0 6px 16px rgba(15,118,110,.25); }

/* Article */
.article { max-width: 768px; margin: 0 auto; padding: 52px 22px; }
.breadcrumb { font-size: .85rem; color: var(--muted); margin-bottom: 14px; }
.breadcrumb a { color: var(--muted); }
.meta-row { color: var(--muted); font-size: .9rem; margin-bottom: 28px; }
.article-hero { display: block; width: 100%; max-width: 460px; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 30%; height: auto; margin: 8px auto 30px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.article p, .article li { font-size: 1.06rem; }
.article ul { padding-left: 0; list-style: none; margin: 1.2em 0; }
.article li { position: relative; padding-left: 30px; margin: .7em 0; }
.article li::before { content: ""; position: absolute; left: 6px; top: .72em; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.callout ul, .cta-box ul { margin: .6em 0 0; }

/* Callout */
.callout { background: var(--teal-soft); border: 1px solid #d8ede6; border-left: 5px solid var(--teal); padding: 22px 26px; border-radius: 18px; margin: 30px 0; box-shadow: var(--shadow-sm); }
.callout ul { margin: 10px 0 0; }
.callout li { margin: 10px 0; }

/* CTA box */
.cta-box { background: linear-gradient(135deg, #eef7f5, var(--teal-light)); border: 1px solid #d8ede6; border-radius: var(--radius-lg); padding: 38px; text-align: center; margin: 44px 0; box-shadow: var(--shadow-sm); }
.cta-box h3 { margin-top: 0; }

/* Tables (scrollables sur mobile via .tbl) */
.tbl { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 30px 0; border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-sm); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: .96rem; background: var(--surface); }
.tbl table { margin: 0; }
th, td { text-align: left; padding: 15px 18px; border-bottom: 1px solid #eef2f1; }
th { background: var(--teal); color: #fff; font-weight: 700; white-space: nowrap; }
tr:last-child td { border-bottom: none; }
table tr:hover td { background: var(--teal-soft); }
@media (max-width: 600px) {
  .tbl table { min-width: 540px; }
  td, th { white-space: nowrap; }
}

/* FAQ */
details { border: 1px solid var(--border); border-radius: 18px; padding: 2px 24px; margin: 14px 0; background: var(--surface); box-shadow: var(--shadow-sm); transition: box-shadow .2s ease; }
details:hover { box-shadow: var(--shadow); }
details summary { font-weight: 700; cursor: pointer; padding: 18px 0; list-style: none; font-size: 1.04rem; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; float: right; color: var(--teal); font-weight: 700; font-size: 1.4rem; line-height: 1; }
details[open] summary::after { content: "\2212"; }
details[open] summary { color: var(--teal); }

/* Footer */
.site-footer { background: #102e29; color: #b9cdc7; padding: 52px 0 30px; margin-top: 64px; font-size: .92rem; }
.site-footer a { color: #b9cdc7; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 30px; }
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr; gap: 22px; } }
.footer-grid h4 { color: #fff; margin: 0 0 12px; font-size: 1rem; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin: 7px 0; }
.disclosure { border-top: 1px solid rgba(255,255,255,.12); margin-top: 32px; padding-top: 20px; font-size: .82rem; color: #8fa8a1; line-height: 1.6; }

/* Pill (badge) */
.pill { display: inline-block; background: var(--teal-light); color: var(--teal-dark); padding: 7px 16px; border-radius: 999px; font-size: .82rem; font-weight: 700; margin-bottom: 18px; }

/* Apparitions douces au défilement (activées seulement si JS + mouvement autorisé) */
@media (prefers-reduced-motion: no-preference) {
  .js-anim .reveal { opacity: 0; transform: translateY(20px); will-change: opacity, transform; }
  .js-anim .reveal.in { opacity: 1; transform: none; transition: opacity var(--dur-in) var(--ease), transform var(--dur-in) var(--ease); }
}

/* Estimateur de budget embarqué (réutilisable, inline dans les articles) */
.cm-estimator { background: linear-gradient(165deg, #eef7f4 0%, #f8f6f0 100%); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px 26px 24px; margin: 34px 0; box-shadow: var(--shadow-sm); }
.cm-estimator h3 { margin: 0 0 4px; font-size: 1.18rem; color: var(--ink); }
.cm-estimator .cm-sub { margin: 0 0 18px; color: var(--muted); font-size: .9rem; }
.cm-estimator .cm-fields { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: end; }
@media (max-width: 600px) { .cm-estimator .cm-fields { grid-template-columns: 1fr; gap: 14px; } }
.cm-estimator label { display: block; font-weight: 700; font-size: .9rem; color: var(--ink); }
.cm-estimator select, .cm-estimator input[type="range"] { width: 100%; margin-top: 8px; }
.cm-estimator select { padding: 11px 12px; border: 1.5px solid var(--border); border-radius: 12px; background: #fff; font: inherit; color: var(--ink); }
.cm-estimator select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(15,118,110,.14); }
.cm-estimator input[type="range"] { accent-color: var(--teal); }
.cm-result { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 22px 0 18px; }
.cm-result .cm-amount { font-size: 1.7rem; font-weight: 800; color: var(--teal); letter-spacing: -.02em; }
.cm-result .cm-note { color: var(--muted); font-size: .9rem; }
.cm-estimator .cm-cta { margin: 0; }

/* Carte « étape suivante » (parcours de lecture guidé) */
.next-step { display: flex; align-items: center; gap: 18px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 16px; padding: 18px 22px; margin: 30px 0 4px; box-shadow: var(--shadow-sm); text-decoration: none; transition: box-shadow .2s ease, transform .2s ease; }
.next-step:hover { box-shadow: var(--shadow); transform: translateY(-1px); text-decoration: none; }
.next-step .ns-ico { font-size: 1.7rem; line-height: 1; flex-shrink: 0; }
.next-step .ns-txt { flex: 1; }
.next-step .ns-label { display: block; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); margin-bottom: 2px; }
.next-step .ns-title { display: block; font-weight: 700; color: var(--ink); font-size: 1.04rem; }
.next-step .ns-arrow { color: var(--teal); font-size: 1.5rem; font-weight: 700; flex-shrink: 0; }

/* ============================================================
   Lifting 2026 : transitions de page, reveals natifs,
   micro-interactions, hero ambiant, bento, mode sombre
   ============================================================ */
:root { color-scheme: light dark; }

/* 1a. Transitions de page fluides (multi-pages) */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: cm-vt-out .18s ease both; }
  ::view-transition-new(root) { animation: cm-vt-in .28s ease both; }
}
@keyframes cm-vt-out { to { opacity: 0; } }
@keyframes cm-vt-in { from { opacity: 0; transform: translateY(8px); } }

/* 1b. Reveals au scroll en CSS pur (compositeur, zéro JS)
   Activé par .cm-native-scroll (ajouté par anim.js si supporté) */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .cm-native-scroll .card,
    .cm-native-scroll .callout,
    .cm-native-scroll .cta-box,
    .cm-native-scroll .tbl,
    .cm-native-scroll .article details,
    .cm-native-scroll .article h2,
    .cm-native-scroll .section-pad h2,
    .cm-native-scroll .cm-estimator,
    .cm-native-scroll .next-step,
    .cm-native-scroll .bento-item {
      animation: cm-reveal linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 22%;
    }
  }
}
@keyframes cm-reveal { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* 1c. Micro-interactions (système) */
.btn:active, .btn-secondary:active, .btn-ghost:active, .chip:active { transform: translateY(0) scale(.985); }
a:focus-visible, .btn:focus-visible, button:focus-visible, select:focus-visible,
input:focus-visible, textarea:focus-visible, summary:focus-visible, .chip:focus-visible,
.bento-item:focus-visible, .next-step:focus-visible, .card:focus-visible, .race-card:focus-visible,
.cm-actu-card:focus-visible, .theme-toggle:focus-visible, .nav-toggle:focus-visible {
  outline: 3px solid var(--ring); outline-offset: 2px;
}
.article p a, .article li a {
  text-decoration: none;
  background-image: linear-gradient(var(--teal), var(--teal));
  background-size: 0% 1.5px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .25s ease;
}
.article p a:hover, .article li a:hover { background-size: 100% 1.5px; text-decoration: none; }

/* 2. Hero ambiant (moment signature, home) */
.hero { position: relative; overflow: hidden; }
.hero > .container { position: relative; z-index: 1; }
.hero::before {
  content: ""; position: absolute; inset: -25% -10% -25% -10%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 52% at 18% 28%, rgba(15,118,110,.20), transparent 70%),
    radial-gradient(34% 46% at 85% 18%, rgba(245,158,11,.16), transparent 70%),
    radial-gradient(44% 58% at 72% 92%, rgba(15,118,110,.14), transparent 70%);
  filter: blur(6px);
}
@media (prefers-reduced-motion: no-preference) {
  .hero::before { animation: cm-aurora 20s ease-in-out infinite alternate; }
}
@keyframes cm-aurora {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(-2.5%, 1.5%, 0) scale(1.06); }
  100% { transform: translate3d(2%, -1.5%, 0) scale(1.03); }
}

/* 3. Bento (section outils, home) */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 30px; }
.bento-item {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 24px; box-shadow: var(--shadow-sm); text-decoration: none; color: var(--ink);
  display: flex; flex-direction: column; gap: 8px; transition: transform .18s ease, box-shadow .25s ease;
}
.bento-item:hover { transform: translateY(-4px); box-shadow: var(--shadow); text-decoration: none; }
.bento-item .b-ico { font-size: 1.8rem; line-height: 1; }
.bento-item h3 { margin: 0; font-size: 1.12rem; }
.bento-item p { margin: 0; color: var(--muted); font-size: .95rem; }
.bento-item .b-go { margin-top: auto; color: var(--teal); font-weight: 700; font-size: .92rem; }
.bento-item.b-wide { grid-column: span 2; }
.bento-item.b-feature { grid-column: span 2; background: linear-gradient(150deg, var(--teal), var(--teal-dark)); border: none; color: #fff; box-shadow: var(--shadow-teal); }
.bento-item.b-feature h3, .bento-item.b-feature p, .bento-item.b-feature .b-go { color: #fff; }
.bento-item.b-feature p { opacity: .92; }
@media (max-width: 880px) { .bento { grid-template-columns: repeat(2, 1fr); } .bento-item.b-wide, .bento-item.b-feature { grid-column: span 2; } }
@media (max-width: 560px) { .bento { grid-template-columns: 1fr; } .bento-item.b-wide, .bento-item.b-feature { grid-column: auto; } }

/* 4. Mode sombre : piloté par [data-theme="dark"] (bouton + mémorisation),
   avec repli automatique pour les visiteurs sans JavaScript. */
[data-theme="dark"] {
  --teal: #2dd4bf; --teal-dark: #14b8a6; --teal-light: #1c3f39; --teal-soft: #14302b;
  --ink: #e7eeea; --muted: #9fb2ac; --bg: #0f1715; --surface: #16211d; --bg-soft: #121b18;
  --accent: #fbbf24; --accent-dark: #f59e0b; --accent-soft: #2a2415; --border: #27332e;
  --shadow-sm: 0 2px 14px rgba(0,0,0,.30); --shadow: 0 16px 46px rgba(0,0,0,.45);
  --shadow-teal: 0 16px 40px rgba(0,0,0,.45);
}
[data-theme="dark"] .site-header { background: rgba(15,23,21,.82); }
[data-theme="dark"] .hero { background: linear-gradient(165deg, #15302b 0%, #0f1715 60%); }
[data-theme="dark"] .simulator select, [data-theme="dark"] .simulator input[type="number"], [data-theme="dark"] .simulator input[type="text"],
[data-theme="dark"] .cm-estimator select { background: #1d2a26; color: var(--ink); border-color: var(--border); }
[data-theme="dark"] .simulator select, [data-theme="dark"] .cm-estimator select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232dd4bf' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 15px;
}
[data-theme="dark"] .sim-result { background: linear-gradient(135deg, #0f766e, #0b5a54); }
[data-theme="dark"] .callout { border-color: var(--border); }
[data-theme="dark"] .cta-box { background: linear-gradient(135deg, #16302b, #1c3f39); border-color: var(--border); }
[data-theme="dark"] .cm-estimator { background: linear-gradient(165deg, #16302b 0%, #121b18 100%); }
[data-theme="dark"] table th { background: #0f766e; color: #fff; }
[data-theme="dark"] th, [data-theme="dark"] td { border-bottom-color: var(--border); }
[data-theme="dark"] .bento-item.b-feature { background: linear-gradient(150deg, #0f766e, #0b5a54); }
[data-theme="dark"] .pill { background: var(--teal-soft); color: var(--teal); }

/* ============================================================
   Passe de profondeur : ombres en couches, dégradés, reliefs
   ============================================================ */
/* Ombres multi-couches (plus de relief, mode clair) */
:root {
  --shadow-sm: 0 1px 2px rgba(16,48,42,.05), 0 4px 14px rgba(16,48,42,.07);
  --shadow: 0 6px 16px rgba(16,48,42,.08), 0 26px 50px rgba(16,48,42,.13);
  --shadow-teal: 0 10px 22px rgba(15,118,110,.22), 0 22px 48px rgba(15,118,110,.20);
}

/* Surfaces en léger dégradé pour le volume */
.bg-soft { background: linear-gradient(180deg, #edf6f2 0%, #f4faf8 100%); }
.card { background: linear-gradient(180deg, #ffffff 0%, #fafdfc 100%); }
.card:hover { transform: translateY(-6px); }
.cta-box { box-shadow: var(--shadow); }
.cm-estimator { box-shadow: var(--shadow-sm); }

/* Boutons : dégradés + relief */
.btn { background-image: linear-gradient(135deg, #f8b13a 0%, #f59e0b 60%, #ef9606 100%); }
.btn-secondary { background-image: linear-gradient(135deg, #13867c 0%, #0f766e 70%); }
.btn-ghost { background-image: none; }

/* Pastille avec relief */
.pill { box-shadow: var(--shadow-sm); }

/* Bento : relief accru + sheen au survol sur le bloc vedette */
.bento-item:hover { transform: translateY(-6px); }
.bento-item.b-feature { position: relative; overflow: hidden; }
.bento-item.b-feature::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.20) 50%, transparent 70%);
  transform: translateX(-130%);
}
@media (prefers-reduced-motion: no-preference) {
  .bento-item.b-feature::after { transition: transform .75s ease; }
  .bento-item.b-feature:hover::after { transform: translateX(130%); }
  .bento-item.b-feature { background-size: 170% 170%; animation: cm-grad 14s ease infinite; }
  @keyframes cm-grad { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
}

/* Survols un peu plus marqués, easing homogène */
.card, .bento-item, .next-step, details { transition: transform .2s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease; }
details:hover { box-shadow: var(--shadow); }

/* Variantes sombres de la passe de profondeur (en dernier pour primer) */
[data-theme="dark"] {
  --shadow-sm: 0 1px 2px rgba(0,0,0,.40), 0 6px 18px rgba(0,0,0,.45);
  --shadow: 0 10px 24px rgba(0,0,0,.50), 0 30px 60px rgba(0,0,0,.55);
  --shadow-teal: 0 14px 34px rgba(0,0,0,.55);
}
[data-theme="dark"] .bg-soft { background: linear-gradient(180deg, #121b18 0%, #0f1715 100%); }
[data-theme="dark"] .card { background: linear-gradient(180deg, #16211d 0%, #18241f 100%); }
[data-theme="dark"] .btn { background-image: linear-gradient(135deg, #fcc04e 0%, #fbbf24 60%, #f3a712 100%); color: #1a1407; }
[data-theme="dark"] .btn-secondary { background-image: linear-gradient(135deg, #18a99c 0%, #0f766e 70%); color: #fff; }

/* Repli automatique pour les visiteurs sans JavaScript (le script anti-flash
   pose normalement data-theme ; ici on couvre le cas où il n'a pas tourné) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --teal: #2dd4bf; --teal-dark: #14b8a6; --teal-light: #1c3f39; --teal-soft: #14302b;
    --ink: #e7eeea; --muted: #9fb2ac; --bg: #0f1715; --surface: #16211d; --bg-soft: #121b18;
    --accent: #fbbf24; --accent-dark: #f59e0b; --accent-soft: #2a2415; --border: #27332e;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.40), 0 6px 18px rgba(0,0,0,.45);
    --shadow: 0 10px 24px rgba(0,0,0,.50), 0 30px 60px rgba(0,0,0,.55);
    --shadow-teal: 0 14px 34px rgba(0,0,0,.55);
  }
  :root:not([data-theme]) .site-header { background: rgba(15,23,21,.82); }
  :root:not([data-theme]) .hero { background: linear-gradient(165deg, #15302b 0%, #0f1715 60%); }
  :root:not([data-theme]) .card { background: linear-gradient(180deg, #16211d 0%, #18241f 100%); }
  :root:not([data-theme]) .bg-soft { background: linear-gradient(180deg, #121b18 0%, #0f1715 100%); }
}

/* ============================================================
   Bouton de thème, mot en dégradé, reflet sur les boutons
   ============================================================ */
/* Mot du titre en dégradé */
.grad { background: linear-gradient(120deg, var(--teal), var(--teal-dark)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* Bouton clair / sombre dans le header */
.theme-toggle {
  position: absolute; top: 16px; right: 22px; margin: 0; z-index: 3;
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  cursor: pointer; font-size: 1.05rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .2s ease;
}
.theme-toggle:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
@media (max-width: 640px) { .theme-toggle { top: 12px; right: 16px; width: 36px; height: 36px; } }

/* Reflet qui balaie les boutons au survol */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-130%); pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .btn::after { transition: transform .6s ease; }
  .btn:hover::after { transform: translateX(130%); }
}

/* Souligné de menu animé */
.nav a { position: relative; }
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: -3px; height: 2px; width: 100%;
  background: var(--teal); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }

/* Chips (quiz) lisibles en sombre */
[data-theme="dark"] .chip { background: var(--surface); }

/* ===== Bloc d'inscription au guide gratuit (lead magnet) ===== */
.cm-lead { padding: var(--sp) 0; }
.cm-lead .cm-lead-card {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 32px; align-items: center;
  background: linear-gradient(150deg, #0f766e 0%, #0b5a54 60%, #08433d 100%);
  color: #fff; border-radius: 22px; padding: 30px 34px; box-shadow: var(--shadow-teal);
  position: relative; overflow: hidden;
}
.cm-lead .cm-lead-card::before {
  content: ""; position: absolute; width: 280px; height: 280px; right: -90px; top: -120px;
  background: radial-gradient(circle, rgba(245,158,11,.30), transparent 70%); pointer-events: none;
}
.cm-lead-badge {
  display: inline-block; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.34);
  color: #fff; font-weight: 700; font-size: .76rem; letter-spacing: .4px; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
}
.cm-lead-txt h2 { color: #fff; font-size: 1.6rem; margin: 14px 0 8px; letter-spacing: -.02em; }
.cm-lead-txt p { color: #e9fbf6; margin: 0 0 12px; font-size: 1.02rem; }
.cm-lead-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.cm-lead-points li { color: #d7f2ec; font-size: .95rem; padding-left: 22px; position: relative; }
.cm-lead-points li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 800; }

.cm-optin { position: relative; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.20); border-radius: 16px; padding: 20px; }
.cm-optin-fields { display: grid; gap: 10px; }
.cm-optin-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 420px) { .cm-optin-row2 { grid-template-columns: 1fr; } }
.cm-optin label { display: block; color: #eafaf5; font-weight: 600; font-size: .92rem; }
.cm-optin .cm-opt { font-weight: 400; color: #bfe6df; font-size: .82rem; }
.cm-optin input[type="email"], .cm-optin input[type="text"]:not(.cm-hp) {
  width: 100%; box-sizing: border-box; margin-top: 5px; padding: 13px 14px; border-radius: 11px;
  border: 1px solid rgba(255,255,255,.45); background: #fff;
  color: #16302a; -webkit-text-fill-color: #16302a;
  font-size: 1rem; font-family: inherit;
}
.cm-optin input::placeholder { color: #9aa3a0; opacity: 1; }
.cm-optin input[type="email"]:focus, .cm-optin input[type="text"]:not(.cm-hp):focus { outline: 3px solid rgba(245,158,11,.5); border-color: var(--accent); }
/* Le champ reste blanc à texte foncé même en thème sombre */
[data-theme="dark"] .cm-optin input[type="email"], [data-theme="dark"] .cm-optin input[type="text"]:not(.cm-hp) { background: #fff; color: #16302a; -webkit-text-fill-color: #16302a; }
.cm-optin .btn { width: 100%; justify-content: center; margin-top: 2px; }
.cm-optin .cm-consent { color: #bfe6df; font-size: .8rem; margin: 10px 0 0; text-align: center; }
/* honeypot anti-spam : invisible */
.cm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cm-optin-ok { text-align: center; color: #fff; }
.cm-optin-ok strong { display: block; font-size: 1.15rem; margin-bottom: 6px; }
.cm-optin-ok .btn { margin-top: 12px; }
.cm-optin-err { background: #fde8e8; color: #b42318; border-radius: 10px; padding: 9px 12px; font-size: .9rem; margin-top: 10px; }

@media (max-width: 760px) {
  .cm-lead .cm-lead-card { grid-template-columns: 1fr; gap: 22px; padding: 24px 20px; }
  .cm-lead-txt h2 { font-size: 1.35rem; }
}

/* Icônes maison (sprite SVG réutilisable) */
.cm-ico{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.18em;color:inherit;flex:none}

/* === Personnalisation : routeur d'accueil === */
@keyframes cmpf{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cm-perso{padding:var(--sp) 0}
.cm-perso-card{max-width:760px;margin:0 auto;background:var(--surface,#fff);border:1px solid var(--border,#e7e2d8);border-radius:22px;padding:28px;box-shadow:0 20px 50px rgba(15,118,110,.10);text-align:center}
.cm-perso-h{margin:0 0 4px}
.cm-perso-sub{color:var(--muted,#5b6b66);margin:0 0 18px}
.cm-perso-bar{height:8px;border-radius:99px;background:rgba(15,118,110,.14);overflow:hidden;margin-bottom:20px}
.cm-perso-bar span{display:block;height:100%;width:33%;border-radius:99px;background:linear-gradient(90deg,#0f766e,#14b8a6);transition:width .35s ease}
.cmp-step{display:none}
.cmp-step.is-on{display:block;animation:cmpf .3s ease}
.cmp-q{font-weight:700;font-size:1.1rem;margin:0 0 14px}
.cmp-step .chip-group{justify-content:center}
.cmp-select{width:100%;max-width:380px;padding:13px 16px;border-radius:13px;border:1.5px solid var(--border,#e7e2d8);background:var(--surface,#fff);color:var(--ink,#16302a);font:inherit;font-weight:600;-webkit-appearance:none;appearance:none}
.cmp-skip{margin-top:14px}
.cmp-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:6px 0 18px}
.cmp-links a{display:inline-block;background:var(--cream,#fdfaf4);border:1px solid var(--border,#e7e2d8);border-radius:99px;padding:9px 16px;font-weight:600;color:var(--teal-dark,#0b5a54);text-decoration:none;transition:transform .12s,box-shadow .12s}
.cmp-links a:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(15,118,110,.14)}
.cmp-restart{display:block;margin:14px auto 0;background:none;border:none;color:var(--muted,#5b6b66);text-decoration:underline;cursor:pointer;font:inherit;font-size:.9rem}
.cmp-back{background:none;border:none;color:var(--muted,#5b6b66);cursor:pointer;font:inherit;font-size:.92rem;margin-top:14px}
[data-theme="dark"] .cm-perso-card{background:var(--surface);border-color:var(--border)}
[data-theme="dark"] .cmp-links a{background:rgba(255,255,255,.05);border-color:var(--border);color:var(--teal,#2dd4bf)}
[data-theme="dark"] .cmp-select{background:var(--surface);border-color:var(--border);color:var(--ink)}

/* === Personnalisation : carte de reco cross-page === */
.cm-reco{background:linear-gradient(135deg,rgba(15,118,110,.07),rgba(20,184,166,.05));border:1px solid var(--border,#e7e2d8);border-radius:16px;padding:15px 18px;margin:0 0 22px;position:relative}
.cm-reco-h{font-weight:700;margin:0 0 9px;padding-right:24px}
.cm-reco-links{display:flex;flex-wrap:wrap;gap:8px}
.cm-reco-links a{display:inline-block;background:var(--surface,#fff);border:1px solid var(--border,#e7e2d8);border-radius:99px;padding:7px 13px;font-weight:600;font-size:.9rem;color:var(--teal-dark,#0b5a54);text-decoration:none}
.cm-reco-links a:hover{box-shadow:0 4px 12px rgba(15,118,110,.14)}
.cm-reco-x{position:absolute;top:9px;right:12px;background:none;border:none;color:var(--muted,#5b6b66);font-size:1.2rem;cursor:pointer;line-height:1}
[data-theme="dark"] .cm-reco{border-color:var(--border)}
[data-theme="dark"] .cm-reco-links a{background:var(--surface);border-color:var(--border);color:var(--teal,#2dd4bf)}
.cm-perso-races{margin:-4px 0 18px;color:var(--muted,#5b6b66);font-weight:600}
.cm-perso-races a{color:var(--teal,#0f766e);font-weight:700}
.cm-seen{margin:0 0 18px;color:var(--muted,#5b6b66);font-weight:600}
.cm-seen a{color:var(--teal,#0f766e);font-weight:700}

/* Sondages anonymes (Observatoire) */
.cm-poll{background:var(--surface,#fff);border:1px solid var(--border,#e7e2d8);border-radius:18px;padding:20px 22px;margin:18px 0;}
.cm-poll-q{font-weight:700;font-size:1.05rem;margin:0 0 14px;}
.cm-poll-opts{display:flex;flex-direction:column;gap:8px;}
.cm-poll-opts button{text-align:left;background:var(--cream,#fdfaf4);border:1.5px solid var(--border,#e7e2d8);border-radius:12px;padding:11px 15px;font:inherit;font-weight:600;color:var(--ink,#16302a);cursor:pointer;transition:border-color .15s,transform .1s;}
.cm-poll-opts button:hover{border-color:var(--teal,#0f766e);transform:translateY(-1px);}
.cm-poll-row{margin:10px 0;}
.cm-poll-lab{display:flex;justify-content:space-between;font-size:.92rem;font-weight:600;margin-bottom:4px;}
.cm-poll-bar{height:10px;border-radius:99px;background:rgba(15,118,110,.12);overflow:hidden;}
.cm-poll-bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#0f766e,#14b8a6);}
.cm-poll-total{color:var(--muted,#5b6b66);font-size:.85rem;margin:12px 0 0;font-weight:600;}
.cm-poll-note{color:var(--muted,#5b6b66);font-size:.8rem;margin:10px 0 0;}
[data-theme="dark"] .cm-poll{background:var(--surface);border-color:var(--border);}
[data-theme="dark"] .cm-poll-opts button{background:rgba(255,255,255,.04);border-color:var(--border);color:var(--ink);}

/* Simulateur coût urgence été (.cm-urgence) */
.cm-urgence{border:1.5px solid #e9ece9;border-radius:18px;padding:22px;margin:26px 0;background:#fff;}
[data-theme="dark"] .cm-urgence{background:var(--surface);border-color:var(--border);}
.cm-urgence h2{margin:0 0 6px;}
.cm-u-intro{color:var(--muted,#6b7280);font-size:.95em;margin:0 0 16px;}
.cm-u-row{margin:14px 0;display:flex;flex-direction:column;gap:8px;}
.cm-u-lab{font-weight:600;font-size:.95em;}
.cm-u-seg{display:flex;flex-wrap:wrap;gap:8px;}
.cm-u-seg button{border:1.5px solid #e3e6e3;background:#fff;border-radius:999px;padding:8px 14px;cursor:pointer;font:inherit;font-weight:600;color:#374151;transition:all .15s;}
.cm-u-seg button[aria-pressed="true"]{border-color:#0f766e;background:rgba(15,118,110,.10);color:#0f766e;}
[data-theme="dark"] .cm-u-seg button{background:var(--surface);border-color:var(--border);color:var(--ink);}
.cm-urgence input[type=range]{width:100%;accent-color:#0f766e;}
.cm-u-tauxval{font-weight:700;color:#0f766e;}
.cm-u-out{margin-top:18px;border-top:1px dashed #e3e6e3;padding-top:16px;}
.cm-u-facture{font-size:1.1em;margin-bottom:14px;}
.cm-u-f{color:#0f766e;font-size:1.25em;}
.cm-u-bars{display:flex;flex-direction:column;gap:10px;margin:10px 0 14px;}
.cm-u-bar{display:grid;grid-template-columns:128px 1fr auto;align-items:center;gap:10px;}
.cm-u-barlab{font-size:.9em;color:var(--muted,#6b7280);}
.cm-u-track{background:#eef0ee;border-radius:999px;height:18px;overflow:hidden;}
[data-theme="dark"] .cm-u-track{background:rgba(255,255,255,.08);}
.cm-u-fill{display:block;height:100%;border-radius:999px;transition:width .25s;}
.cm-u-fill-no{background:#dc2626;}
.cm-u-fill-yes{background:#0f766e;}
.cm-u-amt{font-weight:700;}
.cm-u-no{color:#dc2626;}
.cm-u-yes{color:#0f766e;}
.cm-u-punch{font-weight:600;background:rgba(245,158,11,.12);border-radius:10px;padding:11px 13px;margin:6px 0 0;}
.cm-u-note{color:var(--muted,#6b7280);font-size:.82em;margin:12px 0;}
.cm-u-cta{display:flex;flex-wrap:wrap;gap:10px;}
@media(max-width:520px){.cm-u-bar{grid-template-columns:1fr;gap:3px;}.cm-u-track{height:14px;}}

/* === Lifting 2026 : profondeur + verre dépoli (global) === */
.site-header{ background: rgba(255,255,255,.62); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); border-bottom: 1px solid rgba(255,255,255,.55); }
.card, .bento-item{ border-radius: 22px; border-color: rgba(16,48,42,.06); box-shadow: 0 1px 2px rgba(16,48,42,.05), 0 14px 34px rgba(16,48,42,.11); }
.card:hover, .bento-item:hover{ box-shadow: 0 2px 4px rgba(16,48,42,.07), 0 22px 50px rgba(16,48,42,.16); }
.callout, .next-step, .cm-estimator, .cm-urgence, .cm-poll, .simulator, details, .tbl, .cm-perso-card, .cm-reco, .cm-lead-card{ box-shadow: 0 1px 2px rgba(16,48,42,.05), 0 12px 30px rgba(16,48,42,.10); }
.btn{ box-shadow: 0 10px 24px rgba(245,158,11,.30), inset 0 1px 0 rgba(255,255,255,.40); }
.btn-secondary{ box-shadow: 0 10px 24px rgba(15,118,110,.28), inset 0 1px 0 rgba(255,255,255,.32); }
.btn-ghost{ background: rgba(255,255,255,.55); -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); border: 1px solid rgba(255,255,255,.75); color: var(--teal-dark); box-shadow: 0 6px 16px rgba(16,48,42,.10); }
.btn-ghost:hover{ background: rgba(255,255,255,.78); color: var(--teal-dark); }
.pill{ background: rgba(255,255,255,.55); -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%); border: 1px solid rgba(255,255,255,.7); }
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){
  .site-header{ background: var(--surface); }
  .btn-ghost{ background: var(--surface); }
  .pill{ background: var(--teal-soft); }
}
[data-theme="dark"] .site-header{ background: rgba(15,23,21,.6); border-bottom-color: rgba(255,255,255,.08); }
[data-theme="dark"] .card, [data-theme="dark"] .bento-item{ border-color: rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 44px rgba(0,0,0,.55); }
[data-theme="dark"] .card:hover, [data-theme="dark"] .bento-item:hover{ box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 26px 56px rgba(0,0,0,.62); }
[data-theme="dark"] .callout, [data-theme="dark"] .next-step, [data-theme="dark"] .cm-estimator, [data-theme="dark"] .cm-urgence, [data-theme="dark"] .cm-poll, [data-theme="dark"] .simulator, [data-theme="dark"] details, [data-theme="dark"] .tbl, [data-theme="dark"] .cm-perso-card, [data-theme="dark"] .cm-reco, [data-theme="dark"] .cm-lead-card{ box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 16px 38px rgba(0,0,0,.5); }
[data-theme="dark"] .btn-ghost{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #eaf6f2; }
[data-theme="dark"] .btn-ghost:hover{ background: rgba(255,255,255,.14); color: #fff; }
[data-theme="dark"] .pill{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); }
.article-hero{ box-shadow: 0 1px 2px rgba(16,48,42,.05), 0 14px 34px rgba(16,48,42,.11); }
[data-theme="dark"] .article-hero{ box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 44px rgba(0,0,0,.55); }
.cmp .ins{ box-shadow: 0 1px 2px rgba(16,48,42,.05), 0 10px 26px rgba(16,48,42,.09); transition: box-shadow .2s ease, transform .2s ease; }
.cmp .ins:hover{ box-shadow: 0 2px 4px rgba(16,48,42,.06), 0 16px 38px rgba(16,48,42,.13); transform: translateY(-2px); }
[data-theme="dark"] .cmp .ins{ box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 14px 36px rgba(0,0,0,.5); }

/* Mini-simulateur de rentabilité par race (.cm-renta) */
.cm-renta{border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;margin:34px 0;background:var(--surface);box-shadow:0 1px 2px rgba(16,48,42,.05),0 12px 30px rgba(16,48,42,.10);}
.cm-renta h3{margin:0 0 4px;}
.cm-renta .cm-sub{color:var(--muted);font-size:.92rem;margin:0 0 16px;}
.cm-renta-tiers{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.cm-renta-tiers button{flex:1 1 90px;border:1.5px solid var(--border);background:#fff;border-radius:12px;padding:12px 10px;font-size:.98rem;font:inherit;font-weight:600;color:#374151;cursor:pointer;transition:all .15s;}
.cm-renta-tiers button[aria-pressed="true"]{border-color:var(--teal);background:var(--teal);color:#fff;box-shadow:0 6px 16px rgba(15,118,110,.25);}
.cm-renta-lab{font-weight:700;font-size:.95rem;margin:0 0 8px;color:var(--ink);}
.cm-renta-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:14px;}
.cm-renta-card{border:1.5px solid var(--border);border-radius:16px;padding:14px;background:#fff;}
.cm-renta-card h4{margin:0 0 4px;font-size:.98rem;}
.cm-renta-card .d{color:var(--muted);font-size:.85em;margin:0 0 10px;min-height:46px;}
.cm-renta-line{display:flex;justify-content:space-between;font-size:.9em;padding:3px 0;border-bottom:1px dashed var(--border);}
.cm-renta-line:last-of-type{border-bottom:0;}
.cm-renta-net{font-size:1.3rem;font-weight:800;margin:8px 0 6px;}
.cm-renta-badge{display:inline-block;font-size:.78em;font-weight:700;padding:3px 9px;border-radius:999px;}
.cm-renta .r-ok{color:var(--teal);}.cm-renta .r-neg{color:#b91c1c;}
.cm-renta .b-ok{background:rgba(15,118,110,.12);color:var(--teal);}
.cm-renta .b-mid{background:rgba(245,158,11,.16);color:#b45309;}
.cm-renta .b-neg{background:rgba(185,28,28,.10);color:#b91c1c;}
.cm-renta-note{font-size:.85rem;color:var(--muted);margin:0 0 14px;}
[data-theme="dark"] .cm-renta-tiers button{background:var(--surface);color:var(--ink);}
[data-theme="dark"] .cm-renta-card{background:var(--surface);}
.cm-renta-more{margin:10px 0 0;font-size:.88rem;}
.cm-renta-more a{color:var(--teal);font-weight:600;}

/* === Bloc "A la une" / Actualites (accueil) === */
.cm-actus{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:22px;}
.cm-actu-card{display:flex;flex-direction:column;gap:8px;text-decoration:none;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px 18px 20px;box-shadow:var(--shadow-sm);transition:transform .15s ease,box-shadow .2s ease,border-color .2s ease;}
.cm-actu-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--teal);text-decoration:none;}
.cm-actu-kicker{align-self:flex-start;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--teal-dark);background:var(--teal-soft);padding:3px 10px;border-radius:999px;}
.cm-actu-titre{font-weight:700;font-size:1.02rem;line-height:1.3;color:var(--ink);}
.cm-actu-desc{font-size:.9rem;color:var(--muted);line-height:1.5;}
[data-theme="dark"] .cm-actu-card{background:var(--surface);}
[data-theme="dark"] .cm-actu-kicker{background:rgba(45,212,191,.14);color:var(--teal);}

/* === Header : sections regroupees dans un menu deroulant (logo - menu - theme) === */
.nav-toggle{position:relative;z-index:3;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;cursor:pointer;color:var(--ink);border-radius:999px;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-sm);transition:transform .15s ease,box-shadow .2s ease,color .2s ease;}
.nav-toggle:hover{transform:translateY(-1px);box-shadow:var(--shadow);}
.nav-toggle svg{width:23px;height:23px;display:block;}
.nav-toggle[aria-expanded="true"]{color:var(--teal);}
.site-header.js-nav .container{flex-wrap:nowrap;padding-right:72px;}
.site-header.js-nav .nav{position:absolute;top:calc(100% + 10px);right:16px;z-index:70;width:auto;min-width:232px;display:flex;flex-direction:column;gap:2px;padding:8px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .18s ease,transform .18s ease,visibility .18s;}
.site-header.js-nav .nav.open{opacity:1;visibility:visible;transform:none;}
.site-header.js-nav .nav a{margin-left:0;padding:11px 14px;border-radius:10px;opacity:1;font-size:.98rem;}
.site-header.js-nav .nav a:hover{background:var(--teal-soft);color:var(--teal-dark);}
.site-header.js-nav .nav a::after{display:none;}
[data-theme="dark"] .nav-toggle,[data-theme="dark"] .site-header.js-nav .nav{background:var(--surface);color:var(--ink);}
@media (max-width:640px){.site-header.js-nav .container{padding:12px 64px 12px 20px;}.nav-toggle{width:36px;height:36px;}.nav-toggle svg{width:18px;height:18px;}}

/* === Bloc "pas trouvé votre réponse ?" (contact / feedback) === */
.cm-ask{background:var(--teal-soft);border:1px solid var(--teal-light);border-radius:14px;padding:16px 20px;margin:26px 0;font-size:.98rem;line-height:1.5;color:var(--ink);}
.cm-ask a{color:var(--teal-dark);font-weight:700;}
[data-theme="dark"] .cm-ask{background:rgba(45,212,191,.10);border-color:var(--border);}

/* ===== Icones SVG maison (remplacent les emojis) ===== */
.ic{ width:1em; height:1em; display:inline-block; vertical-align:-.125em; flex:none; }
.pill .ic{ width:1.05em; height:1.05em; vertical-align:-.15em; margin-right:.45em; color:var(--teal-dark); }
.bento-item .b-ico{ display:inline-flex; color:var(--teal); }
.bento-item .b-ico .ic{ width:34px; height:34px; }
.bento-item.b-feature .b-ico{ color:#fff; }
[data-theme="dark"] .bento-item .b-ico{ color:var(--teal); }

/* ===== Hero deux colonnes avec photo ===== */
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center; }
.hero-grid .hero-copy{ min-width:0; }
.hero-photos{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.hero-photo{ width:100%; aspect-ratio:1/1; height:auto; align-self:start; object-fit:cover; object-position:center 30%; border-radius:22px; box-shadow:var(--shadow); }
@media (max-width:820px){ .hero-grid{ grid-template-columns:1fr; gap:24px; } .hero-photos{ max-width:460px; margin:0 auto; } }

/* ===== Cartes races avec photo ===== */
.race-card{ display:flex; flex-direction:column; overflow:hidden; padding:0; text-decoration:none; color:inherit; }
.race-card .race-thumb{ width:100%; aspect-ratio:1/1; height:auto; object-fit:cover; object-position:center 30%; display:block; background:var(--teal-soft); }
.race-card .race-body{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:6px; }
.race-card h3{ margin:0; font-size:1.06rem; }
.race-card p{ margin:0; color:var(--muted); font-size:.93rem; }
.race-card .card-link{ margin-top:4px; color:var(--teal); font-weight:700; text-decoration:none; }
.race-card:hover .card-link{ text-decoration:underline; }

/* ===== Rangee de liens "donnees" compacte (repli de l'ancienne grille) ===== */
.data-links{ display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:center; margin-top:20px; font-weight:600; font-size:.95rem; }
.data-links a{ color:var(--teal); text-decoration:none; }
.data-links a:hover{ text-decoration:underline; }

/* ===== Confort typographique : equilibrage des titres, lecture des paragraphes ===== */
h1, h2, h3, h4, .hero h1 { text-wrap: balance; }
p, li, .lead, .lead-center { text-wrap: pretty; }


/* ===== Grammaire de mouvement unifiee : une seule duree, une seule courbe ===== */
:root{
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .22s;      /* micro-interactions (hover, focus, appui) */
  --dur-in: .55s;   /* apparitions au scroll */
  --lift: -4px;     /* elevation des cartes */
  --lift-sm: -2px;  /* elevation des boutons et petits controles */
  --ring: var(--teal);
  --sp: 48px;   /* rythme vertical uniforme des sections */
}
@media (max-width: 640px){ :root{ --sp: 32px; } }
@media (prefers-reduced-motion: no-preference){
  .btn, .btn-secondary, .btn-ghost, .card, .bento-item, .next-step, details,
  .chip, .cm-actu-card, .race-card, .theme-toggle, .nav-toggle,
  .cmp-links a, .cm-poll-opts button, .cm-renta-tiers button, .cm-u-seg button,
  .nav a, .card-link, .card a.card-link, .ly-poll-opts button, .cmp .ins{
    transition: transform var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                background-color var(--dur) var(--ease),
                color var(--dur) var(--ease);
  }
  /* elevation coherente au survol (une meme logique partout) */
  .card:hover, .bento-item:hover, .cm-actu-card:hover, .race-card:hover{ transform: translateY(var(--lift)); }
  .btn:hover, .btn-secondary:hover, .btn-ghost:hover, .next-step:hover,
  .theme-toggle:hover, .nav-toggle:hover, .cmp-links a:hover,
  .cm-poll-opts button:hover, .cmp .ins:hover{ transform: translateY(var(--lift-sm)); }
  /* meme reflexe d'appui partout */
  .btn:active, .btn-secondary:active, .btn-ghost:active, .chip:active,
  .card:active, .bento-item:active, .cm-actu-card:active, .race-card:active{ transform: translateY(0) scale(.985); }
}


/* ===== Héros : CTA unique + ligne de confiance ===== */
.hero-cta{ display:flex; align-items:center; gap:8px 16px; flex-wrap:wrap; }
.hero-alt{ color:var(--teal-dark); font-weight:600; text-decoration:none; }
.hero-alt:hover{ text-decoration:underline; }
.hero-trust{ display:flex; align-items:center; gap:8px; margin-top:16px; color:var(--muted); font-size:.9rem; font-weight:600; }
.hero-trust .ic{ width:18px; height:18px; color:var(--teal); flex:none; }
[data-theme="dark"] .hero-alt{ color:var(--teal); }

/* ===== Header : badge-logo (glow) + bouton Menu (icone+mot) + theme dans le menu ===== */
.logo{ display:inline-flex; align-items:center; gap:10px; }
.logo-badge{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px; background:linear-gradient(145deg, var(--teal), var(--teal-dark)); color:#fff; flex:none; box-shadow:0 4px 14px rgba(15,118,110,.45), inset 0 1px 0 rgba(255,255,255,.28); }
.logo-badge svg{ width:20px; height:20px; }
[data-theme="dark"] .logo-badge{ box-shadow:0 4px 16px rgba(20,184,166,.5), inset 0 1px 0 rgba(255,255,255,.2); }

/* Bouton Menu en pilule */
.nav-toggle{ width:auto; height:40px; padding:0 16px; gap:8px; border-radius:999px; }
.nav-toggle .nt-ico{ width:20px; height:20px; display:block; }
.nav-toggle .nt-label{ font-weight:700; font-size:.95rem; line-height:1; }
.site-header .container{ padding-right:22px; }
.site-header.js-nav .container{ padding-right:22px; }
@media (max-width:640px){ .site-header.js-nav .container{ padding:10px 16px; } .nav-toggle{ width:auto; height:38px; padding:0 14px; } .nav-toggle .nt-ico{ width:18px; height:18px; } }

/* Separateur + ligne "Mode clair/sombre" dans le menu deroulant */
.site-header.js-nav .nav .nav-sep{ height:1px; background:var(--border); margin:6px 6px; }
.site-header.js-nav .nav .nav-theme{ display:flex; align-items:center; gap:10px; width:100%; padding:11px 14px; border:0; background:none; border-radius:10px; font-family:inherit; font-weight:600; font-size:.98rem; color:var(--ink); cursor:pointer; text-align:left; }
.site-header.js-nav .nav .nav-theme svg{ width:20px; height:20px; flex:none; }
.site-header.js-nav .nav .nav-theme:hover{ background:var(--teal-soft); color:var(--teal-dark); }