@layer reset, tokens, base, layout, components, utilities;

/* ==========================================================================
   TOKENS
   ========================================================================== */
@layer tokens {
  :root {
    color-scheme: light dark;

    /* Teal profond — couleur principale */
    --teal-50:  #eff9f6;
    --teal-100: #d7f0e9;
    --teal-200: #a8ddd0;
    --teal-500: #1ba88c;
    --teal-600: #158a73;
    --teal-700: #0f6e5c;  /* primaire — 6,17:1 sur blanc */
    --teal-800: #0a4a3e;
    --teal-900: #06332b;

    /* Ambre brûlé — réservé aux CTA (5,50:1 sur blanc, blanc dessus 5,50:1) */
    --cta-500: #d4650f;
    --cta-600: #b34700;
    --cta-700: #8f3900;

    /* Neutres chauds */
    --ink-900: #14201d;   /* 16,7:1 */
    --ink-700: #3a4a46;
    --ink-500: #6b7c77;
    --ink-300: #c3cfcb;
    --ink-200: #dfe7e4;
    --ink-100: #e8eeec;
    --paper:     #ffffff;
    --paper-alt: #f7faf9;

    /* Rôles */
    --bg:           var(--paper);
    --bg-alt:       var(--paper-alt);
    --bg-inverse:   var(--teal-900);
    --surface:      var(--paper);
    --text:         var(--ink-900);
    --text-muted:   var(--ink-700);
    --text-subtle:  var(--ink-500);
    --text-inverse: var(--teal-50);
    --border:       var(--ink-200);
    --border-strong:var(--ink-300);
    --accent:       var(--teal-700);
    --accent-hover: var(--teal-800);
    --accent-soft:  var(--teal-50);
    --accent-line:  var(--teal-200);
    --cta:          var(--cta-600);
    --cta-hover:    var(--cta-700);
    --focus:        var(--teal-600);

    /* Typo — pile système, zéro requête réseau */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
    --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem);
    --step-1:  clamp(1.20rem, 1.13rem + 0.35vw, 1.42rem);
    --step-2:  clamp(1.44rem, 1.32rem + 0.60vw, 1.80rem);
    --step-3:  clamp(1.73rem, 1.53rem + 0.98vw, 2.28rem);
    --step-4:  clamp(2.07rem, 1.76rem + 1.55vw, 2.89rem);

    /* Espacement */
    --sp-2xs: 0.25rem;
    --sp-xs:  0.5rem;
    --sp-sm:  0.75rem;
    --sp-md:  1rem;
    --sp-lg:  1.5rem;
    --sp-xl:  2.25rem;
    --sp-2xl: 3.5rem;
    --sp-3xl: 5rem;

    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 16px;

    --shadow-sm: 0 1px 2px rgb(6 51 43 / 0.06), 0 1px 3px rgb(6 51 43 / 0.08);
    --shadow:    0 2px 4px rgb(6 51 43 / 0.05), 0 6px 16px rgb(6 51 43 / 0.09);

    --measure: 68ch;
    --wrap: 1140px;
    --wrap-narrow: 760px;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg:           #0d1614;
      --bg-alt:       #121e1b;
      --bg-inverse:   #061a16;
      --surface:      #16231f;
      --text:         #e6efec;
      --text-muted:   #b3c4bf;
      --text-subtle:  #8b9d98;
      --text-inverse: #e6efec;
      --border:       #26362f;
      --border-strong:#35473f;
      --accent:       #4fc9ab;
      --accent-hover: #7adcc3;
      --accent-soft:  #10231e;
      --accent-line:  #1f4a3f;
      --cta:          #f0873a;
      --cta-hover:    #ffa762;
      --focus:        #4fc9ab;
      --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
      --shadow:    0 2px 4px rgb(0 0 0 / 0.3), 0 6px 16px rgb(0 0 0 / 0.45);
    }
  }

  :root[data-theme="dark"] {
    --bg:           #0d1614;
    --bg-alt:       #121e1b;
    --bg-inverse:   #061a16;
    --surface:      #16231f;
    --text:         #e6efec;
    --text-muted:   #b3c4bf;
    --text-subtle:  #8b9d98;
    --text-inverse: #e6efec;
    --border:       #26362f;
    --border-strong:#35473f;
    --accent:       #4fc9ab;
    --accent-hover: #7adcc3;
    --accent-soft:  #10231e;
    --accent-line:  #1f4a3f;
    --cta:          #f0873a;
    --cta-hover:    #ffa762;
    --focus:        #4fc9ab;
  }
}

/* ==========================================================================
   RESET
   ========================================================================== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }

  html { -webkit-text-size-adjust: 100%; }

  body {
    min-height: 100svh;
    -webkit-font-smoothing: antialiased;
  }

  img, picture, video, iframe, svg {
    display: block;
    max-width: 100%;
    height: auto;
  }

  input, button, textarea, select { font: inherit; color: inherit; }

  h1, h2, h3, h4 { text-wrap: balance; }
  p, li { text-wrap: pretty; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ==========================================================================
   BASE
   ========================================================================== */
@layer base {
  html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: 1.65;
  }

  h1, h2, h3, h4 {
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--text);
  }
  h1 { font-size: var(--step-4); }
  h2 { font-size: var(--step-3); }
  h3 { font-size: var(--step-2); }
  h4 { font-size: var(--step-1); }

  a {
    color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }
  a:hover { color: var(--accent-hover); }

  /* Focus clavier visible — corrige l'outline:0 de l'ancien thème */
  :focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: 2px;
  }

  strong { font-weight: 650; }

  ::selection { background: var(--accent-line); color: var(--text); }
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
@layer layout {
  .wrap {
    width: min(100% - 2rem, var(--wrap));
    margin-inline: auto;
  }
  .wrap-narrow { width: min(100% - 2rem, var(--wrap-narrow)); margin-inline: auto; }

  .skip-link {
    position: absolute;
    left: var(--sp-md);
    top: -4rem;
    z-index: 100;
    background: var(--accent);
    color: #fff;
    padding: var(--sp-xs) var(--sp-md);
    border-radius: var(--radius-sm);
    transition: top 0.15s;
  }
  .skip-link:focus { top: var(--sp-md); color: #fff; }

  /* Corps de texte : largeur de ligne lisible, plus de justify */
  .prose > * + * { margin-block-start: var(--sp-md); }
  .prose > h2 { margin-block-start: var(--sp-xl); }
  .prose > h3 { margin-block-start: var(--sp-lg); }
  .prose p, .prose li { max-width: var(--measure); }
  .prose ul, .prose ol { padding-inline-start: 1.4em; }
  .prose li + li { margin-block-start: var(--sp-2xs); }

  .section { padding-block: var(--sp-2xl); }
  .section-alt { background: var(--bg-alt); }

  .stack-lg > * + * { margin-block-start: var(--sp-lg); }
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */
@layer components {

  /* ---------- En-tête ---------- */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(10px);
    border-block-end: 1px solid var(--border);
  }
  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-md);
    min-height: 4rem;
  }
  .brand {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-xs);
    font-weight: 750;
    font-size: var(--step-1);
    color: var(--text);
    text-decoration: none;
    letter-spacing: -0.02em;
  }


  .nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-xs);
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .nav a {
    display: block;
    padding: 0.6rem var(--sp-sm);   /* cible tactile >= 24px (WCAG 2.2) */
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    text-decoration: none;
    font-size: var(--step--1);
    font-weight: 550;
  }
  .nav a:hover { background: var(--accent-soft); color: var(--accent); }
  .nav a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }

  /* ---------- Fil d'Ariane ---------- */
  .breadcrumb { padding-block: var(--sp-sm); font-size: var(--step--1); }
  .breadcrumb ol {
    display: flex; flex-wrap: wrap; gap: var(--sp-2xs);
    list-style: none; padding: 0; margin: 0;
    color: var(--text-subtle);
  }
  .breadcrumb li + li::before { content: "›"; margin-inline-end: var(--sp-2xs); }

  /* ---------- Boutons ---------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-xs);
    min-height: 2.75rem;
    padding: 0.65rem var(--sp-lg);
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-weight: 650;
    font-size: var(--step-0);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, transform 0.1s;
  }
  .btn:active { transform: translateY(1px); }

  .btn--cta {
    background: var(--cta);
    color: #fff;
    box-shadow: var(--shadow-sm);
  }
  .btn--cta:hover { background: var(--cta-hover); color: #fff; }

  .btn--primary { background: var(--accent); color: #fff; }
  .btn--primary:hover { background: var(--accent-hover); color: #fff; }

  .btn--ghost {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--text);
  }
  .btn--ghost:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

  /* Mention "nouvelle fenêtre" accessible sur les liens sortants */
  .ext::after {
    content: "";
    width: 0.7em; height: 0.7em;
    margin-inline-start: 0.15em;
    background: currentColor;
    clip-path: polygon(0 0,100% 0,100% 100%,80% 100%,80% 34%,14% 100%,0 86%,66% 20%,0 20%);
    display: inline-block;
    flex: none;
  }

  /* ---------- Hero ---------- */
  .hero {
    padding-block: var(--sp-2xl) var(--sp-xl);
    background:
      radial-gradient(70ch 40ch at 15% -10%, var(--accent-soft), transparent 70%);
  }
  .hero__eyebrow {
    display: inline-block;
    font-size: var(--step--1);
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    margin-block-end: var(--sp-xs);
  }
  .hero__lead {
    font-size: var(--step-1);
    color: var(--text-muted);
    max-width: 60ch;
    margin-block-start: var(--sp-md);
  }
  .hero__meta {
    margin-block-start: var(--sp-lg);
    font-size: var(--step--1);
    color: var(--text-subtle);
    display: flex; flex-wrap: wrap; gap: var(--sp-md);
  }

  /* ---------- Grille + carte produit (container queries) ---------- */
  .card-grid {
    display: grid;
    gap: var(--sp-lg);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  }
  .card-grid > * { container-type: inline-size; }

  .product-card {
    position: relative;
    display: grid;
    gap: var(--sp-md);
    height: 100%;
    padding: var(--sp-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s, border-color 0.2s;
  }
  .product-card:hover { box-shadow: var(--shadow); border-color: var(--accent-line); }

  .product-card__media {
    background: var(--bg-alt);
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
  }
  .product-card__media img { width: 100%; height: 100%; object-fit: contain; }

  .product-card__body { display: grid; align-content: start; gap: var(--sp-xs); }
  .product-card__title { font-size: var(--step-1); }
  .product-card__title a { color: var(--text); text-decoration: none; }
  .product-card__title a:hover { color: var(--accent); }

  .product-card__verdict {
    font-size: var(--step--1);
    color: var(--text-muted);
  }
  .product-card__specs {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: var(--sp-2xs);
    font-size: var(--step--1);
  }
  .product-card__specs li {
    display: flex; justify-content: space-between; gap: var(--sp-xs);
    padding-block: 0.2rem;
    border-block-end: 1px dashed var(--border);
  }
  .product-card__specs dt, .product-card__specs .k { color: var(--text-subtle); }
  .product-card__specs .v { font-weight: 650; font-variant-numeric: tabular-nums; }

  .product-card__foot { margin-block-start: auto; display: grid; gap: var(--sp-xs); }
  .product-card__price {
    font-size: var(--step--1);
    color: var(--text-subtle);
  }

  /* Au-delà de 380px de conteneur : passage en 2 colonnes */
  @container (min-width: 380px) {
    .product-card { grid-template-columns: 150px 1fr; align-items: start; }
    .product-card__media { grid-row: span 2; }
    .product-card__foot { grid-column: 2; }
    /* Carte sans visuel : on reste sur une colonne */
    .product-card--text { grid-template-columns: 1fr; }
    .product-card--text .product-card__foot { grid-column: auto; }
  }

  .product-card__rank {
    font-size: var(--step--1);
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  /* ---------- Badges ---------- */
  .badge {
    position: absolute;
    inset-block-start: calc(var(--sp-sm) * -1);
    inset-inline-start: var(--sp-lg);
    padding: 0.2rem var(--sp-sm);
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: var(--step--1);
    font-weight: 650;
    letter-spacing: 0.01em;
  }
  .badge--cta { background: var(--cta); }

  .tag {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid var(--accent-line);
    font-size: var(--step--1);
    font-weight: 600;
  }

  /* ---------- Tableau comparatif : devient des cartes sous 768px ---------- */
  .table-wrap { overflow-x: auto; }

  .cmp {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--step--1);
  }
  .cmp th, .cmp td {
    padding: var(--sp-sm) var(--sp-md);
    text-align: start;
    border-block-end: 1px solid var(--border);
  }
  .cmp thead th {
    background: var(--bg-alt);
    color: var(--text-muted);
    font-size: var(--step--1);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-block-end: 2px solid var(--accent-line);
    position: sticky;
    top: 4rem;
  }
  .cmp tbody tr:hover { background: var(--accent-soft); }
  .cmp td.num { font-variant-numeric: tabular-nums; font-weight: 600; }
  .cmp .row-pick { background: color-mix(in srgb, var(--accent-soft) 70%, transparent); }

  @media (max-width: 768px) {
    .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .cmp, .cmp tbody, .cmp tr, .cmp td { display: block; width: 100%; }
    .cmp tr {
      margin-block-end: var(--sp-md);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
      overflow: hidden;
    }
    .cmp td {
      display: flex;
      justify-content: space-between;
      gap: var(--sp-md);
      padding: var(--sp-xs) var(--sp-md);
    }
    .cmp td::before {
      content: attr(data-label);
      font-weight: 650;
      color: var(--text-subtle);
      flex: none;
    }
  }

  /* ---------- Encart "Notre avis" ---------- */
  .verdict {
    display: grid;
    gap: var(--sp-xs);
    padding: var(--sp-lg);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-inline-start: 4px solid var(--accent);
    border-radius: var(--radius);
  }
  .verdict__label {
    font-size: var(--step--1);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
  }
  .verdict p { max-width: var(--measure); }

  /* Listes pour / contre */
  .pros-cons {
    display: grid;
    gap: var(--sp-lg);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  }
  .pros-cons ul { list-style: none; padding: 0; display: grid; gap: var(--sp-xs); }
  .pros-cons li { display: flex; gap: var(--sp-xs); font-size: var(--step--1); }
  .pros-cons li::before { font-weight: 700; flex: none; }
  .pros li::before { content: "+"; color: var(--teal-600); }
  .cons li::before { content: "−"; color: var(--cta-600); }
  .pros-cons h3 { font-size: var(--step-0); margin-block-end: var(--sp-xs); }

  /* ---------- Encart d'avertissement (page médicale) ---------- */
  .callout {
    display: grid;
    gap: var(--sp-xs);
    padding: var(--sp-md) var(--sp-lg);
    border: 1px solid var(--border-strong);
    border-inline-start: 4px solid var(--cta);
    border-radius: var(--radius);
    background: var(--bg-alt);
    font-size: var(--step--1);
  }
  .callout__label { font-weight: 700; color: var(--cta); }

  /* ---------- Sommaire ---------- */
  .toc {
    padding: var(--sp-md) var(--sp-lg);
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: var(--step--1);
  }
  .toc h2 { font-size: var(--step-0); margin-block-end: var(--sp-xs); }
  .toc ol { margin: 0; padding-inline-start: 1.2em; }
  .toc li + li { margin-block-start: var(--sp-2xs); }

  @media (min-width: 1100px) {
    .with-toc {
      display: grid;
      grid-template-columns: 1fr minmax(0, 240px);
      gap: var(--sp-2xl);
      align-items: start;
    }
    .with-toc .toc { position: sticky; top: 5.5rem; }
  }

  /* ---------- FAQ (zéro JS) ---------- */
  .faq { display: grid; gap: var(--sp-xs); }
  .faq details {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
  }
  .faq details[open] { border-color: var(--accent-line); }
  .faq summary {
    padding: var(--sp-md) var(--sp-lg);
    font-weight: 650;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-md);
    min-height: 3rem;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after {
    content: "+";
    font-size: var(--step-2);
    line-height: 1;
    color: var(--accent);
    flex: none;
  }
  .faq details[open] summary::after { content: "−"; }
  .faq summary:hover { background: var(--accent-soft); }
  .faq .faq__body { padding: 0 var(--sp-lg) var(--sp-lg); }
  .faq .faq__body p { max-width: var(--measure); color: var(--text-muted); }

  .video-facade img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
  .video-facade::after {
    content: "▶";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 3rem;
    color: #fff;
    text-shadow: 0 2px 12px rgb(0 0 0 / 0.5);
  }

  /* ---------- Pied de page ---------- */
  .site-footer {
    margin-block-start: var(--sp-3xl);
    padding-block: var(--sp-xl);
    background: var(--bg-inverse);
    color: var(--text-inverse);
  }
  .site-footer a { color: var(--teal-200); }
  .site-footer a:hover { color: #fff; }
  .site-footer__grid {
    display: grid;
    gap: var(--sp-lg);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  }
  .site-footer h2 { font-size: var(--step-0); color: var(--text-inverse); margin-block-end: var(--sp-xs); }
  .site-footer ul { list-style: none; padding: 0; display: grid; gap: var(--sp-2xs); font-size: var(--step--1); }
  .site-footer__bottom {
    margin-block-start: var(--sp-xl);
    padding-block-start: var(--sp-md);
    border-block-start: 1px solid rgb(255 255 255 / 0.12);
    font-size: var(--step--1);
    color: var(--teal-200);
  }
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
@layer utilities {
  .visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .text-muted  { color: var(--text-muted); }
  .text-subtle { color: var(--text-subtle); }
  .num         { font-variant-numeric: tabular-nums; }
  .center      { text-align: center; }
  .mt-lg  { margin-block-start: var(--sp-lg); }
  .mt-xl  { margin-block-start: var(--sp-xl); }
  .defer  { content-visibility: auto; contain-intrinsic-size: auto 500px; }
}

@layer components {
  /* Logo d'origine */
  .brand img { height: 44px; width: auto; display: block; }

  /* Integration video : ratio fixe, aucun decalage de mise en page */
  .video-embed {
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--ink-900);
    margin-block: var(--sp-lg);
  }
  .video-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

  /* Visuel produit sur les fiches historiques */
  .figure { margin-block: var(--sp-lg); }
  .figure img {
    width: 100%;
    max-width: 360px;
    border-radius: var(--radius);
    background: var(--bg-alt);
    border: 1px solid var(--border);
  }
  .figure figcaption {
    font-size: var(--step--1);
    color: var(--text-subtle);
    margin-block-start: var(--sp-xs);
  }
}