/*══════════════════════════════════════════════════════════════
  AQUAMARINE DYNAMICS — SEO/AEO CONTENT PAGES
  Design system aligné sur la home v3 « Technology of Quiet Power ».
  Feuille de style autonome pour les pages éditoriales générées.
══════════════════════════════════════════════════════════════*/
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* Color tokens (identiques à la home) */
  --ink-0:#06070d; --ink-1:#090b12; --ink-2:#0d1020; --ink-3:#111628; --ink-4:#161d30;
  --wire:rgba(255,255,255,.055); --wire-2:rgba(255,255,255,.09); --wire-3:rgba(255,255,255,.14);
  --aq-100:oklch(82% .14 188); --aq-300:oklch(74% .16 190); --aq-500:oklch(65% .17 192);
  --aq-700:oklch(52% .14 194); --aq-900:oklch(38% .10 196);
  --aq-glow-sm:oklch(74% .16 190 / .10); --aq-glow-md:oklch(74% .16 190 / .22); --aq-glow-lg:oklch(74% .16 190 / .40);
  --aq-wire:oklch(74% .16 190 / .20); --aq-wire-2:oklch(74% .16 190 / .35);
  --t0:#e6eaf5; --t1:#b8bfcf; --t2:#7d869c; --t3:#2a3048;
  --f-d:'DM Serif Display',Georgia,serif;
  --f-b:'Barlow Condensed',sans-serif;
  --f-p:'Barlow',sans-serif;
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;--s7:96px;--s8:128px;
  --r0:2px;--r1:4px;--r2:8px;--r3:16px;
  --ease-out:cubic-bezier(.16,1,.3,1); --dur-mid:320ms;
  --maxw:1180px; --readw:760px;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--ink-1); color:var(--t1);
  font-family:var(--f-p); font-weight:300; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--aq-100);text-decoration:none;transition:color var(--dur-mid) var(--ease-out)}
a:hover{color:var(--aq-300)}
::selection{background:var(--aq-glow-md);color:#fff}

/* Background ambiance */
body::before{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(1100px 620px at 78% -8%, var(--aq-glow-sm), transparent 60%),
    radial-gradient(900px 700px at -10% 12%, oklch(52% .14 194 / .07), transparent 55%),
    var(--ink-1);
}
body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--wire) 1px,transparent 1px),linear-gradient(90deg,var(--wire) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 50% 0,#000,transparent 70%);
          mask-image:radial-gradient(circle at 50% 0,#000,transparent 70%);
}

/* ── Layout primitives ── */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
.prose{max-width:var(--readw)}
.section{padding-block:clamp(48px,7vw,96px)}
.section-tight{padding-block:clamp(32px,5vw,56px)}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--wire-2),transparent);border:0;margin-block:0}

/* ── Navigation (réplique sobre de la home) ── */
.nav{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:24px;
  padding:14px clamp(20px,5vw,40px);
  background:color-mix(in srgb,var(--ink-0) 78%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--wire);
}
.nav-brand{display:flex;align-items:center;gap:10px;color:var(--t0)}
.nav-logo-mark{width:30px;height:30px;border-radius:7px;object-fit:cover;box-shadow:0 0 0 1px var(--aq-wire),0 0 18px var(--aq-glow-sm)}
.nav-wordmark{font-family:var(--f-b);font-weight:500;letter-spacing:.14em;font-size:.84rem;text-transform:uppercase}
.nav-wordmark b{color:var(--aq-100);font-weight:700}
.nav-center{display:flex;gap:22px;list-style:none;margin-inline:auto;flex-wrap:wrap}
.nav-center a{font-family:var(--f-b);font-weight:400;letter-spacing:.04em;color:var(--t1);font-size:.95rem}
.nav-center a:hover{color:var(--t0)}
.nav-cta{
  font-family:var(--f-b);font-weight:500;letter-spacing:.04em;font-size:.92rem;
  padding:9px 18px;border-radius:var(--r1);color:var(--ink-0);
  background:linear-gradient(135deg,var(--aq-100),var(--aq-500));
  box-shadow:0 0 22px var(--aq-glow-sm);white-space:nowrap;
}
.nav-cta:hover{color:var(--ink-0);box-shadow:0 0 30px var(--aq-glow-md);transform:translateY(-1px)}
.nav-ghost{font-family:var(--f-b);color:var(--t1);font-size:.92rem;letter-spacing:.04em;white-space:nowrap}
.nav-ghost:hover{color:var(--aq-100)}
@media(max-width:880px){.nav-center{display:none}}

/* ── Breadcrumb ── */
.crumbs{font-family:var(--f-b);font-size:.82rem;letter-spacing:.05em;color:var(--t2);padding-top:clamp(20px,4vw,34px)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crumbs a{color:var(--t2)}.crumbs a:hover{color:var(--aq-100)}
.crumbs li:not(:last-child)::after{content:'/';margin-left:8px;color:var(--t3)}
.crumbs [aria-current]{color:var(--t1)}

/* ── Page header ── */
.page-head{padding-block:clamp(26px,4vw,48px) clamp(20px,3vw,32px)}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--f-b);
  text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;color:var(--aq-100);margin-bottom:18px;
}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--aq-wire-2)}
h1,h2,h3,h4{color:var(--t0);font-weight:400;line-height:1.12;letter-spacing:-.01em}
.page-head h1{font-family:var(--f-d);font-size:clamp(2.1rem,5.2vw,3.5rem);line-height:1.05;letter-spacing:-.02em}
.page-head h1 em{color:var(--aq-100);font-style:italic}
.lede{font-size:clamp(1.08rem,2.2vw,1.3rem);color:var(--t1);max-width:var(--readw);margin-top:18px;font-weight:300}

/* ── Answer-first box (AEO) ── */
.answer{
  position:relative;margin-top:30px;padding:26px 28px;border-radius:var(--r3);max-width:var(--readw);
  background:linear-gradient(180deg,color-mix(in srgb,var(--ink-3) 90%,transparent),var(--ink-2));
  border:1px solid var(--wire-2);box-shadow:inset 0 1px 0 var(--wire-2),0 24px 60px -40px var(--aq-glow-lg);
}
.answer::before{content:'';position:absolute;left:0;top:18px;bottom:18px;width:2px;border-radius:2px;background:linear-gradient(var(--aq-100),var(--aq-700))}
.answer .label{font-family:var(--f-b);text-transform:uppercase;letter-spacing:.2em;font-size:.7rem;color:var(--aq-100);display:block;margin-bottom:10px}
.answer p{color:var(--t0);font-size:1.05rem}
.answer p+p{margin-top:12px}
.answer strong{color:#fff;font-weight:500}

/* ── Prose typography ── */
.prose h2{font-family:var(--f-d);font-size:clamp(1.55rem,3.4vw,2.15rem);margin-top:clamp(40px,6vw,64px);margin-bottom:16px;letter-spacing:-.015em}
.prose h3{font-family:var(--f-b);font-weight:600;font-size:clamp(1.18rem,2.4vw,1.4rem);color:var(--t0);margin-top:34px;margin-bottom:12px;letter-spacing:.01em}
.prose h2+h3{margin-top:18px}
.prose p{margin-bottom:18px;color:var(--t1)}
.prose strong{color:var(--t0);font-weight:500}
.prose a{border-bottom:1px solid var(--aq-wire-2)}
.prose a:hover{border-color:var(--aq-300)}
.prose ul,.prose ol{margin:0 0 20px;padding-left:0;list-style:none}
.prose ul li,.prose ol li{position:relative;padding-left:30px;margin-bottom:12px;color:var(--t1)}
.prose ul li::before{content:'';position:absolute;left:6px;top:.62em;width:7px;height:7px;border-radius:2px;transform:rotate(45deg);background:linear-gradient(135deg,var(--aq-100),var(--aq-500));box-shadow:0 0 10px var(--aq-glow-sm)}
.prose ol{counter-reset:li}
.prose ol li{counter-increment:li}
.prose ol li::before{content:counter(li);position:absolute;left:0;top:.05em;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-family:var(--f-b);font-size:.78rem;color:var(--aq-100);background:var(--ink-3);border:1px solid var(--aq-wire)}
.prose blockquote{margin:24px 0;padding:18px 24px;border-left:2px solid var(--aq-wire-2);background:var(--ink-2);border-radius:0 var(--r2) var(--r2) 0;color:var(--t0);font-style:italic}

/* ── Cards & grids ── */
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
.card{
  padding:24px;border-radius:var(--r3);background:var(--ink-2);border:1px solid var(--wire);
  transition:border-color var(--dur-mid) var(--ease-out),transform var(--dur-mid) var(--ease-out);
}
.card:hover{border-color:var(--aq-wire);transform:translateY(-2px)}
.card h3{margin-top:0;font-size:1.12rem}
.card p{color:var(--t1);font-size:.98rem;margin-bottom:0}
.card .kicker{font-family:var(--f-b);text-transform:uppercase;letter-spacing:.16em;font-size:.68rem;color:var(--aq-100);margin-bottom:10px}
.card-link{display:block;color:inherit}
.card-link:hover{color:inherit}
.card-link .more{display:inline-flex;gap:6px;align-items:center;margin-top:14px;font-family:var(--f-b);font-size:.86rem;color:var(--aq-100);letter-spacing:.03em}

/* ── Before / After ── */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}
@media(max-width:600px){.ba{grid-template-columns:1fr}}
.ba > div{padding:20px;border-radius:var(--r2);border:1px solid var(--wire)}
.ba .before{background:color-mix(in srgb,#3a0d14 22%,var(--ink-2))}
.ba .after{background:color-mix(in srgb,oklch(52% .14 194) 12%,var(--ink-2));border-color:var(--aq-wire)}
.ba h4{font-family:var(--f-b);letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;margin-bottom:10px}
.ba .before h4{color:#e88}
.ba .after h4{color:var(--aq-100)}

/* ── Tables (comparatifs) ── */
.table-scroll{overflow-x:auto;margin:24px 0;border-radius:var(--r3);border:1px solid var(--wire-2)}
table{width:100%;border-collapse:collapse;font-size:.96rem;min-width:520px}
caption{text-align:left;color:var(--t2);font-size:.85rem;padding:12px 16px;font-family:var(--f-b);letter-spacing:.04em}
th,td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--wire);vertical-align:top}
thead th{font-family:var(--f-b);font-weight:600;letter-spacing:.06em;color:var(--t0);background:var(--ink-3);font-size:.82rem;text-transform:uppercase}
tbody tr:last-child td{border-bottom:0}
tbody th{font-weight:500;color:var(--t0)}
td .yes{color:var(--aq-100)} td .no{color:#e88}

/* ── Stat / metric strip ── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:28px 0}
@media(max-width:700px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{padding:20px;border-radius:var(--r2);background:var(--ink-2);border:1px solid var(--wire);text-align:center}
.stat .v{font-family:var(--f-d);font-size:2rem;color:var(--aq-100);line-height:1}
.stat .l{font-family:var(--f-b);font-size:.82rem;letter-spacing:.05em;color:var(--t1);margin-top:8px;text-transform:uppercase}

/* ── KPI / spec list (key-value) ── */
.specs{display:grid;grid-template-columns:max-content 1fr;gap:8px 20px;margin:18px 0;font-size:.98rem}
.specs dt{font-family:var(--f-b);letter-spacing:.04em;color:var(--aq-100);font-size:.85rem;text-transform:uppercase;padding-top:2px}
.specs dd{color:var(--t1)}
@media(max-width:520px){.specs{grid-template-columns:1fr;gap:2px 0}.specs dd{margin-bottom:10px}}

/* ── Tags / chips ── */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.chip{font-family:var(--f-b);font-size:.8rem;letter-spacing:.04em;padding:5px 12px;border-radius:999px;border:1px solid var(--wire-2);color:var(--t1);background:var(--ink-2)}
.chip:hover{border-color:var(--aq-wire);color:var(--aq-100)}

/* ── FAQ (CSS-only accordéon) ── */
.faq{max-width:var(--readw);margin-top:24px}
.faq details{border-bottom:1px solid var(--wire);padding:6px 0}
.faq summary{cursor:pointer;list-style:none;padding:16px 36px 16px 0;position:relative;font-family:var(--f-b);font-weight:500;font-size:1.08rem;color:var(--t0)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:6px;top:14px;font-size:1.4rem;color:var(--aq-100);transition:transform var(--dur-mid)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 18px;color:var(--t1)}

/* ── CTA band ── */
.cta{
  margin-top:clamp(48px,7vw,80px);padding:clamp(32px,5vw,52px);border-radius:var(--r3);text-align:center;
  background:linear-gradient(135deg,color-mix(in srgb,var(--aq-900) 36%,var(--ink-2)),var(--ink-2));
  border:1px solid var(--aq-wire);box-shadow:0 40px 90px -60px var(--aq-glow-lg);
}
.cta h2{font-family:var(--f-d);font-size:clamp(1.6rem,3.6vw,2.3rem);margin:0 0 12px;color:var(--t0)}
.cta p{color:var(--t1);max-width:560px;margin:0 auto 24px}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-b);font-weight:500;letter-spacing:.04em;padding:13px 26px;border-radius:var(--r1);font-size:1rem;transition:all var(--dur-mid) var(--ease-out)}
.btn-primary{color:var(--ink-0);background:linear-gradient(135deg,var(--aq-100),var(--aq-500));box-shadow:0 0 26px var(--aq-glow-sm)}
.btn-primary:hover{color:var(--ink-0);box-shadow:0 0 38px var(--aq-glow-md);transform:translateY(-2px)}
.btn-ghost{color:var(--t0);border:1px solid var(--wire-3)}
.btn-ghost:hover{color:var(--aq-100);border-color:var(--aq-wire-2)}

/* ── Related / maillage ── */
.related{margin-top:clamp(40px,6vw,64px)}
.related h2{font-family:var(--f-b);font-weight:600;font-size:1.1rem;letter-spacing:.04em;text-transform:uppercase;color:var(--t0);margin-bottom:18px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:760px){.related-grid{grid-template-columns:1fr}}
.related-grid a{display:block;padding:16px 18px;border-radius:var(--r2);background:var(--ink-2);border:1px solid var(--wire);color:var(--t0)}
.related-grid a:hover{border-color:var(--aq-wire);color:var(--aq-100)}
.related-grid .t{font-family:var(--f-b);font-weight:500;font-size:1rem}
.related-grid .d{color:var(--t2);font-size:.85rem;margin-top:4px}

/* ── Callout ── */
.note{margin:24px 0;padding:18px 22px;border-radius:var(--r2);background:var(--ink-2);border:1px solid var(--wire-2);color:var(--t1);font-size:.96rem}
.note strong{color:var(--aq-100)}

/* ── Footer (réplique home) ── */
footer{border-top:1px solid var(--wire);margin-top:clamp(56px,8vw,110px);padding:clamp(40px,6vw,72px) clamp(20px,5vw,40px) 36px;background:var(--ink-0)}
.foot-row{max-width:var(--maxw);margin-inline:auto;display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.footer-logo-mark{width:30px;height:30px;border-radius:7px;object-fit:cover}
.foot-brand-name{font-family:var(--f-b);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--t0)}
.foot-tag{color:var(--t2);font-size:.95rem;margin-bottom:14px}.foot-tag b{color:var(--t1);font-weight:500}
.foot-talk{font-family:var(--f-b);color:var(--aq-100);letter-spacing:.03em}
.foot-links{display:grid;grid-template-columns:repeat(3,auto);gap:10px 36px}
.foot-links a{color:var(--t1);font-size:.93rem}.foot-links a:hover{color:var(--aq-100)}
.foot-links .col-h{font-family:var(--f-b);text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;color:var(--t2);margin-bottom:2px}
.foot-bottom{max-width:var(--maxw);margin:40px auto 0;padding-top:24px;border-top:1px solid var(--wire);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--t2);font-size:.84rem}
.foot-bottom a{color:inherit}.foot-bottom a:hover{color:var(--aq-100)}
@media(max-width:680px){.foot-links{grid-template-columns:repeat(2,auto)}}

/* ── Reveal on scroll ── */
.sr{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.sr.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.sr{opacity:1;transform:none}}