/*
Theme Name: Eau de Quinton
Theme URI: https://eaudequinton.fr
Author: eaudequinton.fr
Description: Thème WordPress éditorial pour eaudequinton.fr — site de référence sur l'eau de Quinton (plasma marin). Identité bleu marine / blanc, monogramme Q.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eaudequinton
Tags: blog, one-column, custom-menu, editor-style, translation-ready
*/

/* ---------- Tokens ---------- */
:root {
  --eq-marine: oklch(0.28 0.08 242);
  --eq-blue: oklch(0.36 0.11 238);
  --eq-blue-mid: oklch(0.5 0.13 238);
  --eq-drop: oklch(0.58 0.13 232);
  --eq-foam: oklch(0.78 0.06 238);
  --eq-ink: oklch(0.3 0.07 238);
  --eq-text: oklch(0.45 0.03 238);
  --eq-muted: oklch(0.62 0.03 238);
  --eq-line: oklch(0.94 0.01 238);
  --eq-line-2: oklch(0.93 0.01 238);
  --eq-tint: oklch(0.97 0.008 238);
  --eq-serif: "Cormorant Garamond", Georgia, serif;
  --eq-sans: "Jost", Helvetica, Arial, sans-serif;
  --eq-pad: 56px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  font-family: var(--eq-sans);
  font-weight: 400;
  color: var(--eq-ink);
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--eq-blue-mid); text-decoration: none; transition: color .15s ease, border-color .15s ease, background .15s ease; }
a:hover { color: var(--eq-blue); }
h1, h2, h3, h4 { font-family: var(--eq-serif); font-weight: 300; line-height: 1.1; color: var(--eq-marine); margin: 0; }
p { margin: 0; }
.eq-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eq-skip:focus { position: fixed; top: 12px; left: 12px; z-index: 999; background: #fff; padding: 10px 16px; border: 1px solid var(--eq-blue); }

/* ---------- Logo ---------- */
.eq-logo { display: flex; align-items: center; gap: 14px; }
.eq-mark { position: relative; width: 46px; height: 46px; flex: none; }
.eq-mark::before { content: ""; position: absolute; inset: 0; border: 1.2px solid var(--eq-blue-mid); border-radius: 50%; }
.eq-mark span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--eq-serif); font-size: 28px; color: oklch(0.34 0.1 238); padding-bottom: 2px; }
.eq-mark::after { content: ""; position: absolute; right: 1px; bottom: 1px; width: 10px; height: 10px; background: var(--eq-drop); border-radius: 50% 50% 50% 1px; transform: rotate(-45deg); box-shadow: 0 0 0 3px #fff; }
.eq-logo-text { display: flex; flex-direction: column; gap: 3px; }
.eq-logo-name { font-size: 16px; letter-spacing: .15em; text-transform: uppercase; color: var(--eq-ink); line-height: 1; }
.eq-logo-url { font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: oklch(0.65 0.04 238); }
/* variants */
.eq-mark--lg { width: 68px; height: 68px; }
.eq-mark--lg span { font-size: 40px; padding-bottom: 3px; }
.eq-mark--lg::after { right: 2px; bottom: 2px; width: 13px; height: 13px; box-shadow: 0 0 0 4px #fff; }
.eq-mark--sm { width: 40px; height: 40px; }
.eq-mark--sm span { font-size: 24px; }
.eq-mark--sm::after { width: 9px; height: 9px; box-shadow: 0 0 0 3px var(--eq-tint); }
.eq-mark--light::before { border-color: rgba(255,255,255,.8); }
.eq-mark--light span { color: #fff; }
.eq-mark--light::after { background: oklch(0.8 0.09 228); box-shadow: 0 0 0 3px var(--eq-marine); }

/* ---------- Header ---------- */
.eq-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 20px var(--eq-pad);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--eq-line);
}
.eq-nav ul { display: flex; align-items: center; gap: 30px; margin: 0; padding: 0; list-style: none; }
.eq-nav a { font-size: 14px; color: var(--eq-text); }
.eq-nav a:hover { color: var(--eq-blue); }
.eq-nav .eq-cta > a, .eq-nav li.button > a { display: inline-flex; align-items: center; height: 40px; padding: 0 20px; border-radius: 20px; background: var(--eq-blue); color: #fff; font-size: 13px; letter-spacing: .06em; }
.eq-nav .eq-cta > a:hover, .eq-nav li.button > a:hover { background: oklch(0.3 0.11 238); color: #fff; }
.eq-burger { display: none; background: none; border: 0; font-size: 22px; color: var(--eq-ink); cursor: pointer; padding: 6px; }

/* ---------- Buttons ---------- */
.eq-btn { display: inline-flex; align-items: center; height: 52px; padding: 0 28px; border-radius: 26px; font-size: 15px; letter-spacing: .04em; }
.eq-btn--solid { background: var(--eq-blue); color: #fff; }
.eq-btn--solid:hover { background: oklch(0.3 0.11 238); color: #fff; }
.eq-btn--ghost { border: 1px solid oklch(0.86 0.04 238); color: var(--eq-blue); }
.eq-btn--ghost:hover { border-color: var(--eq-blue-mid); }
.eq-btn--onmarine { height: 48px; padding: 0 24px; border: 1px solid rgba(255,255,255,.35); color: #fff; font-size: 14px; }
.eq-btn--onmarine:hover { border-color: #fff; color: #fff; }

/* ---------- Sections ---------- */
.eq-section { padding: 96px var(--eq-pad); border-bottom: 1px solid var(--eq-line); }
.eq-eyebrow { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: oklch(0.62 0.05 238); }
.eq-split { display: flex; flex-wrap: wrap; gap: 48px 64px; }
.eq-split__aside { flex: 0 1 320px; display: flex; flex-direction: column; gap: 12px; }
.eq-split__aside h2 { font-size: 40px; }
.eq-split__body { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.eq-lead { font-size: 19px; line-height: 1.7; color: var(--eq-text); max-width: 820px; text-wrap: pretty; }
.eq-lead strong { font-weight: 500; color: var(--eq-ink); }

/* ---------- Hero ---------- */
.eq-hero { display: grid; grid-template-columns: 1.1fr .9fr; border-bottom: 1px solid var(--eq-line); }
.eq-hero__text { display: flex; flex-direction: column; gap: 28px; padding: 96px var(--eq-pad); max-width: 780px; }
.eq-badge { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; height: 30px; padding: 0 14px; border: 1px solid oklch(0.88 0.04 238); border-radius: 15px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: oklch(0.55 0.07 238); }
.eq-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--eq-drop); }
.eq-hero h1 { font-size: 72px; letter-spacing: -.01em; text-wrap: balance; }
.eq-hero h1 em { font-style: italic; color: var(--eq-blue-mid); }
.eq-hero p { font-size: 18px; line-height: 1.65; color: var(--eq-text); max-width: 560px; text-wrap: pretty; }
.eq-actions { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 4px; }
.eq-stats { display: flex; flex-wrap: wrap; gap: 44px; margin-top: 12px; padding-top: 28px; border-top: 1px solid var(--eq-line); }
.eq-stat b { display: block; font-family: var(--eq-serif); font-size: 34px; font-weight: 400; color: var(--eq-blue); line-height: 1; margin-bottom: 5px; }
.eq-stat span { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--eq-muted); }
.eq-hero__media { position: relative; min-height: 620px; background: linear-gradient(170deg, oklch(0.52 0.12 236), oklch(0.26 0.08 242)); overflow: hidden; }
.eq-hero__media::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 14px); }
.eq-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.eq-ripple { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 300px; height: 300px; }
.eq-ripple i { position: absolute; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; }
.eq-ripple i:nth-child(1) { inset: 0; }
.eq-ripple i:nth-child(2) { inset: 46px; border-color: rgba(255,255,255,.4); }
.eq-ripple i:nth-child(3) { inset: 92px; border-color: rgba(255,255,255,.55); }
.eq-ripple i:nth-child(4) { inset: 132px; background: rgba(255,255,255,.9); border: 0; }
.eq-ph { position: absolute; left: 32px; bottom: 28px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; letter-spacing: .1em; color: rgba(255,255,255,.75); }

/* ---------- Cards ---------- */
.eq-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.eq-card { display: flex; flex-direction: column; gap: 10px; padding: 26px; border: 1px solid var(--eq-line-2); border-radius: 4px; }
.eq-card h3 { font-family: var(--eq-sans); font-size: 16px; font-weight: 500; color: var(--eq-ink); }
.eq-card p { font-size: 14px; line-height: 1.6; color: oklch(0.5 0.02 238); }
.eq-ico { margin-bottom: 6px; width: 26px; height: 26px; }
.eq-ico--drop { background: var(--eq-drop); border-radius: 50% 50% 50% 2px; transform: rotate(-45deg); }
.eq-ico--ring { border: 2px solid var(--eq-drop); border-radius: 50%; }
.eq-ico--bar { height: 3px; background: var(--eq-drop); }

/* ---------- Duo (isotonique / hypertonique) ---------- */
.eq-duo { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--eq-line); }
.eq-duo__col { display: flex; flex-direction: column; gap: 18px; padding: 80px var(--eq-pad); }
.eq-duo__col:first-child { border-right: 1px solid var(--eq-line); }
.eq-duo__col:last-child { background: var(--eq-tint); }
.eq-duo h2 { font-size: 44px; line-height: 1.05; }
.eq-duo p { font-size: 16px; line-height: 1.7; color: var(--eq-text); max-width: 480px; }
.eq-ticks { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; margin: 0; list-style: none; }
.eq-ticks li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--eq-text); }
.eq-ticks li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: oklch(0.65 0.1 232); flex: none; }

/* ---------- Feature (origine) ---------- */
.eq-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.eq-feature__media { position: relative; min-height: 420px; background: oklch(0.95 0.01 238); border: 1px solid oklch(0.92 0.01 238); overflow: hidden; }
.eq-feature__media::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, oklch(0.9 0.02 238) 0 2px, transparent 2px 12px); }
.eq-feature__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.eq-feature__media .eq-ph { color: oklch(0.5 0.03 238); left: 24px; bottom: 22px; }
.eq-feature__text { display: flex; flex-direction: column; gap: 22px; }
.eq-feature h2 { font-size: 44px; }
.eq-feature p { font-size: 17px; line-height: 1.75; color: var(--eq-text); max-width: 560px; text-wrap: pretty; }
.eq-inline-link { align-self: flex-start; font-size: 15px; letter-spacing: .04em; border-bottom: 1px solid oklch(0.8 0.06 238); padding-bottom: 4px; }

/* ---------- Études (marine) ---------- */
.eq-studies { padding: 96px var(--eq-pad); background: var(--eq-marine); color: #fff; display: flex; flex-direction: column; gap: 40px; }
.eq-studies__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 40px; }
.eq-studies__head > div { display: flex; flex-direction: column; gap: 14px; max-width: 620px; }
.eq-studies .eq-eyebrow { color: rgba(255,255,255,.55); }
.eq-studies h2 { font-size: 46px; color: #fff; }
.eq-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: rgba(255,255,255,.16); }
.eq-study { display: flex; flex-direction: column; gap: 12px; padding: 34px 30px; background: var(--eq-marine); }
.eq-study span { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: oklch(0.78 0.09 228); }
.eq-study h3 { font-family: var(--eq-serif); font-size: 26px; font-weight: 300; line-height: 1.25; color: #fff; }
.eq-study p { font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.65); }
.eq-note { display: flex; align-items: flex-start; gap: 14px; max-width: 900px; padding: 22px 26px; border: 1px solid rgba(255,255,255,.2); border-radius: 4px; font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.75); }
.eq-note::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: oklch(0.78 0.09 228); margin-top: 7px; flex: none; }

/* ---------- FAQ ---------- */
.eq-faq { display: flex; flex-direction: column; }
.eq-faq details { border-top: 1px solid var(--eq-line-2); }
.eq-faq details:last-child { border-bottom: 1px solid var(--eq-line-2); }
.eq-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; font-size: 19px; color: var(--eq-ink); cursor: pointer; list-style: none; }
.eq-faq summary::-webkit-details-marker { display: none; }
.eq-faq summary::after { content: "+"; font-size: 24px; font-weight: 300; color: oklch(0.68 0.06 238); }
.eq-faq details[open] summary::after { content: "–"; }
.eq-faq details > div { padding: 0 0 26px; font-size: 16px; line-height: 1.7; color: var(--eq-text); max-width: 720px; }

/* ---------- CTA ---------- */
.eq-cta-band { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 100px var(--eq-pad); text-align: center; }
.eq-cta-band h2 { font-size: 46px; max-width: 700px; text-wrap: balance; }
.eq-cta-band p { font-size: 17px; line-height: 1.7; color: oklch(0.48 0.03 238); max-width: 560px; text-wrap: pretty; }

/* ---------- Article / pages ---------- */
.eq-page { padding: 72px var(--eq-pad) 96px; }
.eq-page__inner { max-width: 760px; margin: 0 auto; }
.eq-page h1 { font-size: 54px; margin-bottom: 18px; text-wrap: balance; }
.eq-meta { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--eq-muted); margin-bottom: 28px; }
.eq-prose { font-size: 18px; line-height: 1.75; color: var(--eq-text); }
.eq-prose > * + * { margin-top: 1.1em; }
.eq-prose h2 { font-size: 34px; margin-top: 1.6em; }
.eq-prose h3 { font-family: var(--eq-sans); font-size: 20px; font-weight: 500; color: var(--eq-ink); }
.eq-prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 24px; border-left: 2px solid var(--eq-foam); font-family: var(--eq-serif); font-size: 24px; color: var(--eq-ink); }
.eq-prose ul, .eq-prose ol { padding-left: 22px; }
.eq-prose img, .eq-prose figure { margin: 2em 0; }
.eq-list { display: flex; flex-direction: column; gap: 0; max-width: 860px; margin: 0 auto; }
.eq-list article { padding: 30px 0; border-top: 1px solid var(--eq-line-2); }
.eq-list article:last-child { border-bottom: 1px solid var(--eq-line-2); }
.eq-list h2 { font-size: 30px; margin-bottom: 8px; }
.eq-list p { font-size: 16px; line-height: 1.65; color: var(--eq-text); }
.eq-pagination { display: flex; gap: 16px; justify-content: center; padding-top: 40px; font-size: 14px; }

/* ---------- Footer ---------- */
.eq-footer { padding: 60px var(--eq-pad) 40px; background: var(--eq-tint); border-top: 1px solid var(--eq-line-2); display: flex; flex-direction: column; gap: 40px; }
.eq-footer__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.eq-footer__about { display: flex; flex-direction: column; gap: 16px; max-width: 320px; }
.eq-footer__about p { font-size: 14px; line-height: 1.65; color: oklch(0.52 0.02 238); }
.eq-fcol h4 { font-family: var(--eq-sans); font-size: 11px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--eq-muted); margin-bottom: 12px; }
.eq-fcol ul { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.eq-fcol a { font-size: 14px; color: oklch(0.45 0.02 238); }
.eq-fcol a:hover { color: var(--eq-blue); }
.eq-footer__bottom { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; padding-top: 24px; border-top: 1px solid oklch(0.92 0.01 238); font-size: 13px; color: var(--eq-muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  :root { --eq-pad: 32px; }
  .eq-hero { grid-template-columns: 1fr; }
  .eq-hero__media { min-height: 380px; }
  .eq-hero h1 { font-size: 54px; }
  .eq-feature { grid-template-columns: 1fr; gap: 40px; }
  .eq-footer__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .eq-burger { display: block; }
  .eq-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--eq-line); padding: 18px var(--eq-pad) 26px; }
  .eq-nav.is-open { display: block; }
  .eq-nav ul { flex-direction: column; align-items: flex-start; gap: 18px; }
  .eq-duo { grid-template-columns: 1fr; }
  .eq-duo__col:first-child { border-right: 0; border-bottom: 1px solid var(--eq-line); }
  .eq-section, .eq-studies { padding: 64px var(--eq-pad); }
  .eq-hero__text { padding: 64px var(--eq-pad); }
  .eq-hero h1 { font-size: 42px; }
  .eq-page h1 { font-size: 38px; }
  .eq-studies h2, .eq-cta-band h2, .eq-feature h2 { font-size: 34px; }
  .eq-footer__cols { grid-template-columns: 1fr; }
}
/* ---------- Tableau de composition ---------- */
.eq-table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.75rem 0 .5rem;
	font-size: .95rem;
}
.eq-table th,
.eq-table td {
	padding: .7rem .9rem;
	text-align: left;
	border-bottom: 1px solid rgba(18, 65, 78, .12);
}
.eq-table thead th {
	font-weight: 500;
	color: var(--eq-ink);
	border-bottom-width: 2px;
}
.eq-table tbody tr:last-child td {
	border-bottom: none;
}
.eq-caption {
	font-size: .85rem;
	color: var(--eq-muted);
	margin: 0 0 1.75rem;
}

/* ---------- Sous-menus déroulants ---------- */
.eq-nav li { position: relative; }
.eq-nav .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-width: 260px;
  margin: 0;
  padding: 12px 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--eq-line);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(16,42,58,.08);
  z-index: 60;
}
.eq-nav li:hover > .sub-menu,
.eq-nav li:focus-within > .sub-menu { display: flex; }
.eq-nav .sub-menu li { width: 100%; }
.eq-nav .sub-menu a {
  display: block;
  padding: 9px 20px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--eq-text);
}
.eq-nav .sub-menu a:hover { color: var(--eq-blue); background: var(--eq-tint); }
.eq-nav .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
@media (max-width: 860px) {
  .eq-nav .sub-menu {
    display: flex;
    position: static;
    min-width: 0;
    padding: 10px 0 4px 18px;
    border: 0;
    box-shadow: none;
    gap: 12px;
  }
  .eq-nav .sub-menu a { padding: 0; }
  .eq-nav .menu-item-has-children > a::after { display: none; }
}
/* ================================================================
   COMPOSANTS ÉDITORIAUX + ANIMATIONS
   À coller à la fin de style.css
   ================================================================ */

/* ---------- Apparition au défilement (sans JS) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .eq-reveal {
      animation: eqReveal linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 22%;
    }
    @keyframes eqReveal {
      from { opacity: 0; transform: translateY(22px); }
      to   { opacity: 1; transform: none; }
    }
  }
}

/* ---------- Encadré « L'essentiel » ---------- */
.eq-tldr {
  position: relative;
  margin: 8px 0 36px;
  padding: 30px 34px 30px 38px;
  background: var(--eq-tint);
  border-left: 3px solid var(--eq-drop);
  border-radius: 0 4px 4px 0;
}
.eq-tldr h3 {
  font-family: var(--eq-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--eq-muted);
  margin-bottom: 16px;
}
.eq-tldr ul { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.eq-tldr li { display: flex; gap: 12px; font-size: 16px; line-height: 1.6; color: var(--eq-text); }
.eq-tldr li::before {
  content: "";
  flex: none;
  width: 6px; height: 6px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--eq-drop);
}

/* ---------- Chiffres clés ---------- */
.eq-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin: 32px 0;
  background: var(--eq-line);
  border: 1px solid var(--eq-line);
  border-radius: 4px;
  overflow: hidden;
}
.eq-figure { background: #fff; padding: 26px 22px; transition: background .25s ease; }
.eq-figure:hover { background: var(--eq-tint); }
.eq-figure b {
  display: block;
  font-family: var(--eq-serif);
  font-size: 36px;
  font-weight: 400;
  line-height: 1;
  color: var(--eq-blue);
  margin-bottom: 8px;
}
.eq-figure span { font-size: 12px; line-height: 1.5; letter-spacing: .04em; color: var(--eq-muted); }

/* ---------- Points forts / limites ---------- */
.eq-balance { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 32px 0; }
.eq-balance > div { padding: 26px 28px; border: 1px solid var(--eq-line-2); border-radius: 4px; }
.eq-balance h4 {
  font-family: var(--eq-sans);
  font-size: 11px; font-weight: 400;
  letter-spacing: .18em; text-transform: uppercase;
  margin-bottom: 16px;
}
.eq-balance--plus h4 { color: oklch(0.5 0.09 165); }
.eq-balance--minus h4 { color: oklch(0.55 0.11 35); }
.eq-balance ul { display: flex; flex-direction: column; gap: 11px; margin: 0; padding: 0; list-style: none; }
.eq-balance li { display: flex; gap: 10px; font-size: 15px; line-height: 1.55; color: var(--eq-text); }
.eq-balance li::before { flex: none; font-size: 15px; line-height: 1.5; }
.eq-balance--plus li::before { content: "+"; color: oklch(0.5 0.09 165); }
.eq-balance--minus li::before { content: "–"; color: oklch(0.55 0.11 35); }
@media (max-width: 720px) { .eq-balance { grid-template-columns: 1fr; } }

/* ---------- Verdict ---------- */
.eq-verdict {
  display: flex; flex-wrap: wrap; align-items: center; gap: 30px;
  margin: 40px 0;
  padding: 32px 36px;
  background: var(--eq-marine);
  border-radius: 4px;
  color: #fff;
}
.eq-verdict__score { flex: none; text-align: center; }
.eq-verdict__score b {
  display: block;
  font-family: var(--eq-serif);
  font-size: 54px; font-weight: 400; line-height: 1;
  color: #fff;
}
.eq-verdict__score span {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.eq-verdict__text { flex: 1 1 300px; }
.eq-verdict__text h3 {
  font-family: var(--eq-serif); font-size: 26px; font-weight: 300;
  color: #fff; margin-bottom: 10px;
}
.eq-verdict__text p { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.75); }

/* ---------- Bloc d'appel à l'action ---------- */
.eq-cta-box {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 24px;
  margin: 44px 0;
  padding: 34px 36px;
  border: 1px solid var(--eq-line);
  border-radius: 4px;
  background: linear-gradient(180deg, #fff, var(--eq-tint));
  transition: border-color .25s ease, transform .25s ease;
}
.eq-cta-box:hover { border-color: oklch(0.82 0.06 238); transform: translateY(-2px); }
.eq-cta-box__text { flex: 1 1 320px; }
.eq-cta-box h3 { font-size: 26px; margin-bottom: 8px; }
.eq-cta-box p { font-size: 15px; line-height: 1.6; color: var(--eq-text); }
.eq-cta-box .eq-btn { flex: none; }
.eq-btn--solid { transition: background .2s ease, transform .2s ease; }
.eq-btn--solid:hover { transform: translateY(-1px); }

/* ---------- Liens et cartes : micro-interactions ---------- */
.eq-card { transition: border-color .25s ease, transform .25s ease; }
.eq-card:hover { border-color: oklch(0.85 0.05 238); transform: translateY(-3px); }
.eq-inline-link { transition: border-color .2s ease, gap .2s ease; }
.eq-inline-link:hover { border-color: var(--eq-blue); }
.eq-faq summary::after { transition: transform .2s ease; }
.eq-faq details[open] summary::after { transform: rotate(180deg); }
.eq-faq details > div { animation: eqFade .25s ease both; }
@keyframes eqFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- Barre d'action fixe (mobile) ---------- */
.eq-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 18px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--eq-line);
}
.eq-bar span { font-size: 13px; line-height: 1.35; color: var(--eq-text); }
.eq-bar .eq-btn { height: 42px; padding: 0 18px; font-size: 13px; flex: none; }
@media (max-width: 860px) {
  .eq-bar { display: flex; }
  body { padding-bottom: 70px; }
  .eq-verdict { padding: 26px 24px; gap: 20px; }
  .eq-tldr { padding: 24px 22px 24px 26px; }
  .eq-cta-box { padding: 26px 24px; }
}

/* ---------- Sommaire en cartes ---------- */
.eq-toc { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin: 36px 0; }
.eq-toc a {
  display: flex; flex-direction: column; gap: 8px;
  padding: 26px 28px;
  border: 1px solid var(--eq-line-2);
  border-radius: 4px;
  transition: border-color .25s ease, transform .25s ease, background .25s ease;
}
.eq-toc a:hover { border-color: oklch(0.84 0.05 238); background: var(--eq-tint); transform: translateY(-3px); }
.eq-toc__num { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--eq-muted); }
.eq-toc__title { font-family: var(--eq-serif); font-size: 24px; font-weight: 300; line-height: 1.2; color: var(--eq-marine); }
.eq-toc__desc { font-size: 14px; line-height: 1.6; color: var(--eq-text); }

/* ---------- Chronologie ---------- */
.eq-timeline { position: relative; margin: 36px 0; padding-left: 30px; }
.eq-timeline::before {
  content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px;
  width: 1px; background: var(--eq-line);
}
.eq-tl { position: relative; padding: 0 0 30px; }
.eq-tl:last-child { padding-bottom: 0; }
.eq-tl::before {
  content: ""; position: absolute; left: -30px; top: 7px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #fff; border: 2px solid var(--eq-drop);
}
.eq-tl b {
  display: block; font-family: var(--eq-serif); font-size: 22px;
  font-weight: 400; color: var(--eq-blue); line-height: 1.2; margin-bottom: 6px;
}
.eq-tl p { font-size: 15px; line-height: 1.65; color: var(--eq-text); max-width: 640px; }

/* ---------- Glossaire ---------- */
.eq-gloss { display: flex; flex-direction: column; margin: 32px 0; }
.eq-gloss div {
  display: grid; grid-template-columns: 220px 1fr; gap: 24px;
  padding: 20px 0;
  border-top: 1px solid var(--eq-line-2);
}
.eq-gloss div:last-child { border-bottom: 1px solid var(--eq-line-2); }
.eq-gloss dt, .eq-gloss b {
  font-family: var(--eq-sans); font-size: 15px; font-weight: 500; color: var(--eq-ink);
}
.eq-gloss p { font-size: 15px; line-height: 1.65; color: var(--eq-text); }
@media (max-width: 720px) { .eq-gloss div { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- Encadré d'avertissement ---------- */
.eq-warn {
  display: flex; gap: 18px;
  margin: 32px 0;
  padding: 26px 30px;
  background: oklch(0.97 0.02 40);
  border-left: 3px solid oklch(0.62 0.14 38);
  border-radius: 0 4px 4px 0;
}
.eq-warn::before {
  content: ""; flex: none;
  width: 20px; height: 20px; margin-top: 3px;
  border: 2px solid oklch(0.58 0.14 38);
  border-radius: 50%;
  background:
    linear-gradient(oklch(0.58 0.14 38), oklch(0.58 0.14 38)) center 4px / 2px 8px no-repeat,
    linear-gradient(oklch(0.58 0.14 38), oklch(0.58 0.14 38)) center 14px / 2px 2px no-repeat;
}
.eq-warn div { flex: 1 1 auto; }
.eq-warn h4 {
  font-family: var(--eq-sans); font-size: 15px; font-weight: 500;
  color: oklch(0.42 0.12 38); margin-bottom: 8px;
}
.eq-warn p { font-size: 15px; line-height: 1.7; color: oklch(0.42 0.05 40); }
.eq-warn p + p { margin-top: 10px; }

/* ================================================================
   ANIMATIONS ET VISUALISATIONS
   ================================================================ */

/* ---------- Barre de progression de lecture ---------- */
@supports (animation-timeline: scroll()) {
  .eq-progress {
    position: fixed; top: 0; left: 0; z-index: 90;
    height: 2px; width: 100%;
    background: var(--eq-drop);
    transform-origin: 0 50%;
    animation: eqProgress linear;
    animation-timeline: scroll(root block);
  }
  @keyframes eqProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ---------- Barres de proportion ---------- */
.eq-bars { display: flex; flex-direction: column; gap: 18px; margin: 32px 0; }
.eq-bar-row { display: grid; grid-template-columns: 160px 1fr 90px; gap: 16px; align-items: center; }
.eq-bar-row__label { font-size: 15px; color: var(--eq-ink); }
.eq-bar-row__track {
  position: relative; height: 8px;
  background: var(--eq-line); border-radius: 4px; overflow: hidden;
}
.eq-bar-row__fill {
  position: absolute; inset: 0 auto 0 0;
  width: var(--w, 10%);
  background: var(--eq-drop);
  border-radius: 4px;
  transform-origin: 0 50%;
}
.eq-bar-row--strong .eq-bar-row__fill { background: var(--eq-blue); }
.eq-bar-row--weak .eq-bar-row__fill { background: oklch(0.75 0.08 238); }
.eq-bar-row__value { font-size: 14px; color: var(--eq-muted); text-align: right; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .eq-bar-row__fill {
      animation: eqGrow linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }
    @keyframes eqGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
}
@media (max-width: 640px) {
  .eq-bar-row { grid-template-columns: 1fr 70px; }
  .eq-bar-row__label { grid-column: 1 / -1; font-size: 14px; }
}

/* ---------- Apparition en cascade ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .eq-stagger > * {
      animation: eqReveal linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 20%;
    }
    .eq-stagger > *:nth-child(2) { animation-range: entry 0% cover 24%; }
    .eq-stagger > *:nth-child(3) { animation-range: entry 0% cover 28%; }
    .eq-stagger > *:nth-child(4) { animation-range: entry 0% cover 32%; }
    .eq-stagger > *:nth-child(5) { animation-range: entry 0% cover 36%; }
  }
}

/* ---------- Flèche animée des liens ---------- */
.eq-inline-link::after {
  content: " →";
  display: inline-block;
  transition: transform .22s ease;
}
.eq-inline-link:hover::after { transform: translateX(5px); }

/* ---------- Chiffres clés : apparition ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .eq-figures .eq-figure b {
      animation: eqPop linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 32%;
    }
    @keyframes eqPop {
      from { opacity: 0; transform: translateY(10px) scale(.94); }
      to   { opacity: 1; transform: none; }
    }
  }
}

/* ---------- Lignes de tableau : révélation ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .eq-table tbody tr {
      animation: eqRow linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 18%;
    }
    @keyframes eqRow { from { opacity: 0; } to { opacity: 1; } }
  }
}

/* ---------- Verdict : accent lumineux ---------- */
.eq-verdict { position: relative; overflow: hidden; }
.eq-verdict::after {
  content: ""; position: absolute; right: -60px; top: -60px;
  width: 220px; height: 220px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
}
.eq-verdict__score b { transition: transform .3s ease; }
.eq-verdict:hover .eq-verdict__score b { transform: scale(1.05); }

/* ---------- Encadré essentiel : filet animé ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .eq-tldr {
      background-image: linear-gradient(var(--eq-drop), var(--eq-drop));
      background-size: 3px 100%;
      background-position: 0 0;
      background-repeat: no-repeat;
      border-left-color: transparent;
      animation: eqLine linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 25%;
    }
    @keyframes eqLine { from { background-size: 3px 0%; } to { background-size: 3px 100%; } }
  }
}

/* ---------- Pied de page : listes et mentions ---------- */
.eq-fcol ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.eq-fcol li { margin: 0; padding: 0; }
.eq-fcol li::marker { content: none; }
.eq-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.eq-footer__legal a { font-size: 13px; color: var(--eq-muted); }
.eq-footer__legal a:hover { color: var(--eq-blue); }
@media (max-width: 860px) {
  .eq-footer__bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
}