/* =========================================================================
   COMPOSANTS — briques réutilisables, sans dépendance JS
   Convention : .c-<nom>, modificateurs .c-<nom>--<variante>
   ========================================================================= */

/* --- Boutons ----------------------------------------------------------- */
.c-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2xs);
  padding: .75em 1.5em;
  border-radius: var(--radius-full);
  font-size: var(--step-0); font-weight: 600; line-height: 1;
  text-decoration: none; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-spring),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.c-btn:active { transform: scale(.97); }
.c-btn--primary { background: var(--brand); color: var(--text-on-brand); box-shadow: var(--shadow-s); }
.c-btn--primary:hover { background: var(--brand-hover); box-shadow: var(--shadow-glow); transform: translateY(-2px); }
.c-btn--ghost { border: 1px solid var(--border-strong); color: var(--text); }
.c-btn--ghost:hover { border-color: var(--brand); color: var(--brand); background: var(--surface-brand); }
.c-btn--quiet { color: var(--text-muted); padding-inline: .5em; }
.c-btn--quiet:hover { color: var(--brand); }
.c-btn--lg { font-size: var(--step-1); padding: .85em 1.8em; }
.c-btn[aria-disabled="true"], .c-btn:disabled { opacity: .5; pointer-events: none; }

/* flèche qui avance au survol — micro-détail qui fait cher */
.c-btn .arrow { transition: transform var(--dur-base) var(--ease-spring); }
.c-btn:hover .arrow { transform: translateX(4px); }

/* --- En-tête / navigation ---------------------------------------------- */
.c-header {
  position: sticky; top: 0; z-index: var(--z-header);
  min-height: var(--header-h);
  display: flex; align-items: center;
  background: oklch(from var(--surface) l c h / .82);
  backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.c-header[data-scrolled] { border-bottom-color: var(--border); box-shadow: var(--shadow-s); }
.c-nav { display: flex; gap: var(--space-m); align-items: center; }
/* :not(.c-btn) : sans cela, la couleur du lien de nav écraserait celle du bouton
   (specificite .c-nav a > .c-btn--primary) et le CTA deviendrait illisible. */
.c-nav a:not(.c-btn) { text-decoration: none; font-size: var(--step--1); font-weight: 500; color: var(--text-muted); position: relative; }
.c-nav a:not(.c-btn):hover, .c-nav a:not(.c-btn)[aria-current="page"] { color: var(--text); }
.c-nav a:not(.c-btn)::after {
  content: ""; position: absolute; left: 0; bottom: -6px;
  width: 100%; height: 2px; background: var(--brand);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-base) var(--ease-out);
}
.c-nav a:not(.c-btn):hover::after,
.c-nav a:not(.c-btn)[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

/* Menu mobile : le bouton n'existe qu'en dessous de 1024px, la nav devient un panneau */
[data-nav-toggle] { display: none; }
@media (max-width: 1024px) {
  [data-nav-toggle] { display: inline-flex; }
  .c-nav {
    position: fixed; inset: var(--header-h) 0 0 0; z-index: var(--z-overlay);
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: var(--space-m); padding: var(--gutter);
    background: var(--surface);
    translate: 0 -100%; visibility: hidden;
    transition: translate var(--dur-base) var(--ease-out), visibility var(--dur-base);
  }
  .c-nav[data-open] { translate: 0 0; visibility: visible; }
  .c-nav a:not(.c-btn) { font-size: var(--step-2); }
}

/* --- Carte ------------------------------------------------------------- */
.c-card {
  position: relative;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: var(--space-m);
  display: flex; flex-direction: column; gap: var(--space-xs);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.c-card--interactive:hover { transform: translateY(-4px); box-shadow: var(--shadow-l); border-color: var(--border-strong); }
/* rend toute la carte cliquable depuis un seul lien, sans casser l'accessibilité */
.c-card--interactive a::before { content: ""; position: absolute; inset: 0; }
.c-card--feature { border: 0; background: var(--surface-brand); }
.c-card__media { border-radius: var(--radius-m); overflow: hidden; aspect-ratio: 16 / 10; }
.c-card__media img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--dur-slow) var(--ease-out); }
.c-card--interactive:hover .c-card__media img { scale: 1.05; }

/* --- Badge / puce ------------------------------------------------------ */
.c-badge {
  display: inline-flex; align-items: center; gap: var(--space-3xs);
  padding: .3em .8em; border-radius: var(--radius-full);
  font-size: var(--step--2); font-weight: 600; letter-spacing: .02em;
  background: var(--surface-brand); color: var(--brand);
}
.c-badge--outline { background: none; border: 1px solid var(--border-strong); color: var(--text-muted); }

/* --- Statistique / preuve chiffrée ------------------------------------- */
.c-stat { display: flex; flex-direction: column; gap: var(--space-3xs); }
.c-stat__value { font-family: var(--font-display); font-size: var(--step-5); line-height: 1; font-weight: 700; letter-spacing: var(--tracking-tight); }
.c-stat__label { font-size: var(--step--1); color: var(--text-muted); }

/* --- Formulaire -------------------------------------------------------- */
.c-field { display: flex; flex-direction: column; gap: var(--space-3xs); }
.c-field label { font-size: var(--step--1); font-weight: 600; }
.c-field :is(input, textarea, select) {
  width: 100%; padding: .7em .9em;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-s);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.c-field :is(input, textarea, select):focus {
  border-color: var(--brand); box-shadow: var(--ring); outline: none;
}
.c-field__hint { font-size: var(--step--2); color: var(--text-subtle); }
.c-field__error { font-size: var(--step--2); color: var(--err-500); }
.c-field :user-invalid { border-color: var(--err-500); }

/* --- Accordéon (natif, zéro JS) ---------------------------------------- */
.c-accordion { border-block-end: 1px solid var(--border); }
.c-accordion summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-s);
  padding-block: var(--space-s); cursor: pointer; font-weight: 600; list-style: none;
}
.c-accordion summary::-webkit-details-marker { display: none; }
.c-accordion summary::after {
  content: "+"; font-size: var(--step-2); color: var(--brand); line-height: 1;
  transition: rotate var(--dur-base) var(--ease-spring);
}
.c-accordion[open] summary::after { rotate: 45deg; }
.c-accordion__body { padding-block-end: var(--space-s); color: var(--text-muted); max-width: var(--measure); }
/* ouverture animée là où c'est supporté */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .c-accordion::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size var(--dur-base) var(--ease-out), content-visibility var(--dur-base) allow-discrete;
  }
  .c-accordion[open]::details-content { block-size: auto; }
}

/* --- Fil d'ariane, tableau, alerte ------------------------------------- */
.c-breadcrumb { display: flex; flex-wrap: wrap; gap: var(--space-2xs); font-size: var(--step--1); color: var(--text-subtle); }
.c-breadcrumb li + li::before { content: "/"; margin-inline-end: var(--space-2xs); color: var(--border-strong); }
.c-breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-2xs); list-style: none; padding: 0; }

.c-table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.c-table :is(th, td) { padding: var(--space-xs) var(--space-s); text-align: left; border-block-end: 1px solid var(--border); }
.c-table th { font-weight: 600; color: var(--text-muted); }
.c-table tbody tr:hover { background: var(--surface-sunken); }

.c-alert { display: flex; gap: var(--space-xs); padding: var(--space-s); border-radius: var(--radius-m); border: 1px solid var(--border); background: var(--surface-sunken); font-size: var(--step--1); }
.c-alert--warn { border-color: var(--warn-500); }
.c-alert--err  { border-color: var(--err-500); }
.c-alert--ok   { border-color: var(--ok-500); }

/* --- Pied de page ------------------------------------------------------ */
.c-footer { background: var(--surface-sunken); border-block-start: 1px solid var(--border); padding-block: var(--space-2xl) var(--space-l); }
.c-footer a { color: var(--text-muted); text-decoration: none; font-size: var(--step--1); }
.c-footer a:hover { color: var(--brand); }

/* --- Motifs de fond (à la place du dégradé violet générique) ------------ */
.bg-grid {
  background-image:
    linear-gradient(to right, oklch(from var(--text) l c h / .06) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(from var(--text) l c h / .06) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}
.bg-noise::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bg-spot { position: relative; isolation: isolate; }
.bg-spot::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 50% at 50% 0%, var(--surface-brand), transparent 70%);
}