/* Objectif Galop — layout layer on top of the Organic design system.
   Everything here composes DS tokens; no raw hexes, no raw spacing values. */

/* The DS base rule (`img { max-width: 100% }`) doesn't reset `height`, so a
   shrunk <img> keeps the literal pixel value of its HTML `height` attribute
   as its CSS height, and the browser's default `object-fit: fill` squashes
   the picture to fit that now-too-narrow box — most visible wherever images
   of different aspect ratios sit in a CSS grid (.figure-grid). height:auto
   restores proportional scaling; it composes fine with .card-thumb's
   aspect-ratio, which already assumes an auto height. */
img { height: auto; }

a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent-800); }

.container { max-width: 1180px; margin: 0 auto; padding-inline: 20px; }
.container-narrow { max-width: 760px; margin: 0 auto; padding-inline: 20px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-accent); color: #fff;
  padding: var(--space-3) var(--space-4); border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* ── header ───────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--color-bg); border-bottom: 1px solid var(--color-divider);
}
.site-header .bar {
  max-width: 1180px; margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 999px; background: var(--color-accent);
  display: grid; place-items: center; box-shadow: var(--shadow-sm); flex: none;
}
.brand-name { display: grid; line-height: 1; }
.brand-name b {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px; color: var(--color-text);
}
.brand-name span {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-neutral-600); margin-top: 4px;
}
.main-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.main-nav a {
  padding: 9px 14px; border-radius: 999px; white-space: nowrap;
  font-size: 15px; font-weight: 600; color: var(--color-neutral-800);
}
.main-nav a:hover,
.main-nav a[aria-current="page"] { background: var(--color-accent-200); color: var(--color-accent-800); }

.burger {
  width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid var(--color-neutral-300); background: transparent;
  display: none; place-items: center; cursor: pointer; color: var(--color-neutral-800);
  margin-left: auto;
}
.burger:hover { background: var(--color-accent-200); border-color: var(--color-accent-300); }
.mobile-nav { border-top: 1px solid var(--color-divider); padding: 10px 20px 18px; display: none; gap: 4px; }
.mobile-nav[data-open="true"] { display: grid; }
.mobile-nav a {
  padding: 12px 14px; border-radius: var(--radius-md);
  font-weight: 600; color: var(--color-neutral-800);
}
.mobile-nav a:hover { background: var(--color-accent-200); color: var(--color-accent-800); }

@media (max-width: 1080px) {
  .main-nav { display: none; }
  .burger { display: grid; }
}

/* ── breadcrumb ───────────────────────────────────────────────────────── */
.breadcrumb { font-size: 13px; color: var(--color-neutral-700); padding: var(--space-4) 0 0; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumb li::after { content: "›"; margin-left: 6px; color: var(--color-neutral-500); }
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb a { color: var(--color-neutral-700); }
.breadcrumb a:hover { color: var(--color-accent-800); }

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero { padding: var(--space-8) 0 var(--space-6); }
.hero h1 { font-size: clamp(34px, 6vw, 54px); max-width: 15ch; margin-bottom: var(--space-4); }
.hero p.lead { font-size: 18px; line-height: 1.6; max-width: 58ch; color: var(--color-neutral-800); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

.section { padding: var(--space-8) 0; }
.section > h2 { margin-bottom: var(--space-6); }
.section-head { display: flex; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-6); }
.section-head h2 { margin: 0; }
.section-head a { margin-left: auto; font-weight: 600; font-size: 15px; white-space: nowrap; }

/* ── card grids ───────────────────────────────────────────────────────── */
.grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grid-2 { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

a.card { color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
a.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: inherit; }
.card-thumb {
  aspect-ratio: 16 / 10; width: 100%; object-fit: cover;
  border-radius: var(--radius-md); background: var(--color-neutral-200);
}

/* ── article ──────────────────────────────────────────────────────────── */
.article-head { padding: var(--space-6) 0 var(--space-4); }
.article-head h1 { font-size: clamp(30px, 5vw, 44px); max-width: 20ch; }
.article-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  margin-top: var(--space-4); font-size: 13px; color: var(--color-neutral-700);
}

.prose { font-size: 17px; line-height: 1.72; }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { font-size: 28px; margin-top: var(--space-8); }
.prose h3 { font-size: 22px; margin-top: var(--space-6); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: var(--space-2); }
.prose img, .prose figure { border-radius: var(--radius-md); }
.prose a { text-decoration: underline; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td {
  padding: var(--space-3); text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--color-divider);
}
.prose th {
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-neutral-700);
}
.table-wrap { overflow-x: auto; border-radius: var(--radius-md); background: var(--color-surface); padding: var(--space-3); }

/* Callouts — the soins sheets lean on "à ne surtout pas faire" style warnings. */
.callout {
  border-radius: var(--radius-md); padding: var(--space-4);
  background: var(--color-accent-2-100); border-left: 4px solid var(--color-accent-2-600);
}
.callout-danger { background: var(--color-accent-100); border-left-color: var(--color-accent-600); }
.callout > :last-child { margin-bottom: 0; }

.figure-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ── related / internal linking ───────────────────────────────────────── */
.related { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-divider); }
.related h2 { font-size: 24px; }
.partner-card {
  display: block; border-radius: var(--radius-md); background: var(--color-accent-2-100);
  padding: var(--space-4); margin-top: var(--space-6); color: var(--color-accent-2-900);
}
.partner-card:hover { background: var(--color-accent-2-200); color: var(--color-accent-2-900); }
.partner-card b { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; }

/* ── footer ───────────────────────────────────────────────────────────── */
.site-footer { background: var(--color-accent-2-800); color: var(--color-accent-2-100); margin-top: 72px; }
.site-footer .cols {
  max-width: 1180px; margin: 0 auto; padding: 56px 20px 28px;
  display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.site-footer h2 {
  font-family: var(--font-heading); font-size: 15px; color: #fff; margin: 0 0 14px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 15px; }
.site-footer a { color: var(--color-accent-2-200); }
.site-footer a:hover { color: #fff; }
.site-footer p { color: var(--color-accent-2-200); font-size: 15px; line-height: 1.65; }
.footer-brand { max-width: 300px; }
.footer-brand .row { display: flex; align-items: center; gap: 10px; }
.footer-brand .mark {
  width: 34px; height: 34px; border-radius: 999px; background: var(--color-accent);
  display: grid; place-items: center; flex: none;
}
.footer-brand .name { font-family: var(--font-heading); font-size: 19px; color: #fff; }
.footer-partner {
  display: block; border-radius: var(--radius-md); background: var(--color-accent-2-700);
  padding: 16px; color: #fff;
}
.footer-partner:hover { background: var(--color-accent-2-600); color: #fff; }
.footer-partner b { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; }
.footer-partner span { display: block; font-size: 14px; line-height: 1.55; color: var(--color-accent-2-200); margin-top: 6px; }
.footer-legal { border-top: 1px solid var(--color-accent-2-700); }
.footer-legal .row {
  max-width: 1180px; margin: 0 auto; padding: 18px 20px;
  display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 13px; color: var(--color-accent-2-300);
}
.footer-legal .row .right { margin-left: auto; }

/* ── cookie consent ───────────────────────────────────────────────────── */
.cookie-banner {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
  background: var(--color-surface); border-top: 1px solid var(--color-divider);
  box-shadow: var(--shadow-lg); padding: var(--space-4) 0;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner .row {
  max-width: 1180px; margin: 0 auto; padding-inline: 20px;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
}
.cookie-banner p { margin: 0; flex: 1 1 320px; font-size: 14px; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Legacy content uses <mark> to highlight the term being defined. The inline
   colours are stripped at build time, so theme it from the accent ramp instead
   of letting the browser's default yellow fight the warm ground. */
.prose mark {
  background: var(--color-accent-200);
  color: var(--color-accent-900);
  padding: 0 .18em; border-radius: var(--radius-sm);
}

/* The "à ne surtout pas faire" headings inside the soins sheets. */
.prose h2.is-danger { color: var(--color-accent-800); }
.prose h2.is-danger::before {
  content: "⚠"; margin-right: .4em; color: var(--color-accent-600);
}

/* Unfilled legal placeholders — deliberately loud so they cannot ship. */
mark.todo {
  background: var(--color-accent-200); color: var(--color-accent-900);
  padding: 2px 6px; border-radius: var(--radius-sm); font-weight: 600;
}

.contact-form { display: grid; gap: var(--space-4); max-width: 34rem; }
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Call-to-action linking a lesson or a level to its quiz. Accent-filled so it
   reads as an action, not as another article card. */
.cta-exercices {
  display: flex; align-items: center; gap: var(--space-4);
  margin-top: var(--space-6); padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-accent-100);
  border: 1px solid var(--color-accent-300);
  color: var(--color-accent-900);
}
.cta-exercices:hover {
  background: var(--color-accent-200); color: var(--color-accent-900);
}
.cta-exercices-icon {
  width: 44px; height: 44px; flex: none; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--color-accent); color: var(--color-bg);
}
.cta-exercices-text { display: grid; gap: 2px; }
.cta-exercices-text b {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px;
}
.cta-exercices-text span { font-size: 14px; opacity: .85; }

/* FAQ blocks: native <details> so it works with zero JS, styled to match
   the card language rather than the browser's default triangle-and-line. */
.faq { display: grid; gap: var(--space-3); }
.faq-item {
  border-radius: var(--radius-md); background: var(--color-surface);
  padding: var(--space-3) var(--space-4);
}
.faq-item summary {
  cursor: pointer; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 16px; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "+"; color: var(--color-accent); margin-right: var(--space-2); font-weight: 700; }
.faq-item[open] summary::before { content: "–"; }
.faq-item summary:hover { color: var(--color-accent-700); }
.faq-item > div { margin-top: var(--space-2); font-size: 15px; }
.faq-item > div > :last-child { margin-bottom: 0; }

.draft-notice {
  border-radius: var(--radius-md); padding: var(--space-4);
  background: var(--color-accent-100); border-left: 4px solid var(--color-accent-600);
  margin-bottom: var(--space-6);
}