/* =========================================================================
   Richard Casino — site stylesheet
   TYPO-04 · SPACE-10 · CONT-02 · BP-08 · GEO-03 · MOTION-04 · NAME-01
   Sections sorted alphabetically by selector root.
   ========================================================================= */


/* -------------------------------------------------------------------------
   Design tokens (root)
   ------------------------------------------------------------------------- */
:root {
  /* palette (final, already pre-shifted by build) */
  --color-primary: #003526;
  --color-accent: #db9a51;
  --color-accent-pressed: #d58b30;
  --color-bg: #012b20;
  --color-bg-elevated: #023a2c;
  --color-gradient-light: #ffea7a;
  --color-gradient-mid: #1e1f21;
  --color-text: #ffffff;
  --color-text-muted: #bfbfbf;
  --color-rg-banner: #dc2626;

  /* typography — TYPO-04 Refined Calm */
  --font-display: 'Roboto Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Roboto', 'Helvetica Neue', sans-serif;
  --fs-h1: 38px;
  --fs-h2: 30px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-h5: 17px;
  --fs-h6: 15px;
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-micro: 13px;
  --lh-tight: 1.25;
  --lh-normal: 1.6;
  --lh-loose: 1.8;
  --ls-tight: 0;
  --ls-normal: 0;
  --ls-wide: 0.01em;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 600;

  /* spacing — SPACE-10 Mild Geometric ×1.5 */
  --space-2xs: 4px;
  --space-xs: 7px;
  --space-sm: 11px;
  --space-md: 17px;
  --space-lg: 26px;
  --space-xl: 40px;
  --space-2xl: 60px;
  --space-3xl: 90px;

  /* containers — CONT-02 Compact Modular + site-wide rule */
  --container-site: 1300px;
  --container-readable: 720px;
  --container-padding-mobile: 16px;
  --container-padding-tablet: 24px;
  --container-padding-desktop: 40px;

  /* breakpoints — BP-08 (mirror for JS reference) */
  --bp-sm: 620px;
  --bp-md: 940px;
  --bp-lg: 1200px;
  --bp-xl: 1620px;

  /* geometry — GEO-03 Pill-Heavy */
  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 9999px;
  --radius-circle: 50%;
  --shadow-xs: none;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.09);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.13);
  --border-thin: 1px;
  --border-medium: 2px;
  --border-thick: 3px;

  /* motion — MOTION-04 Sharp Snappy */
  --dur-fast: 80ms;
  --dur-base: 120ms;
  --dur-slow: 180ms;
  --ease-out: cubic-bezier(0.5, 0, 0.5, 1);
  --ease-in: cubic-bezier(0.5, 0, 1, 0.5);
  --ease-in-out: cubic-bezier(0.5, 0, 0.5, 1);

  /* layout helpers — header offset for fixed-position strategy STICKY-04 */
  --header-height-desktop: 88px;
  --header-height-mobile: 64px;
}


/* -------------------------------------------------------------------------
   Mobile token overrides
   ------------------------------------------------------------------------- */
@media (max-width: 620px) {
  :root {
    --fs-h1: 28px;
    --fs-h2: 24px;
    --fs-h3: 20px;
    --fs-h4: 18px;
    --fs-h5: 16px;
    --fs-h6: 14px;
    --fs-body: 16px;
    --fs-small: 14px;
    --fs-micro: 12px;
  }
}


/* -------------------------------------------------------------------------
   Reset / base
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  overflow-x: clip;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  margin: 0;
  padding-top: var(--header-height-desktop);
}

@media (max-width: 940px) {
  body {
    padding-top: var(--header-height-mobile);
  }
}

a {
  color: inherit;
  text-decoration-skip-ink: auto;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

main {
  display: block;
}


/* -------------------------------------------------------------------------
   Accessibility / motion preferences
   ------------------------------------------------------------------------- */
.skip-link {
  background: var(--color-accent);
  color: var(--color-bg);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  left: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  position: fixed;
  top: -200px;
  transition: top var(--dur-fast) var(--ease-out);
  z-index: 200;
}

.skip-link:focus,
.skip-link:focus-visible {
  top: var(--space-sm);
}

.sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}


/* =========================================================================
   Component — author-byline (BYLINE-05 Horizontal Bar Full-Width) — .oriel
   ========================================================================= */
.oriel {
  background: var(--color-primary);
  margin-block: var(--space-2xl) 0;
  padding-block: var(--space-lg);
}

.oriel-inner {
  align-items: center;
  display: flex;
  gap: var(--space-md);
  justify-content: space-between;
  margin-inline: auto;
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
  padding-inline: var(--container-padding-desktop);
}

.oriel-author-info {
  align-items: center;
  display: flex;
  gap: var(--space-md);
}

.oriel-portrait {
  border-radius: var(--radius-circle);
  height: 56px;
  object-fit: cover;
  width: 56px;
}

.oriel-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.oriel-name {
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  margin: 0;
}

.oriel-name a {
  color: var(--color-text);
  text-decoration: none;
}

.oriel-name a:hover {
  color: var(--color-accent);
}

.oriel-role {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  margin: 0;
}

.oriel-date {
  color: var(--color-text-muted);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  margin-top: var(--space-2xs);
}

.oriel-cta {
  background: var(--color-bg);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
  color: var(--color-accent);
  display: inline-flex;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  padding: var(--space-sm) var(--space-md);
  text-decoration: none;
  transition: background var(--dur-fast), color var(--dur-fast);
  white-space: nowrap;
}

.oriel-cta:hover {
  background: var(--color-accent);
  color: var(--color-bg);
}

@media (max-width: 620px) {
  .oriel-inner {
    flex-direction: column;
    text-align: center;
  }
  .oriel-cta {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}


/* =========================================================================
   Component — author-card (AUTH-08 Minimal Avatar + Name) — .dossier
   ========================================================================= */
.dossier {
  margin-inline: auto;
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
  padding-block: var(--space-2xl);
  padding-inline: var(--container-padding-desktop);
}

.dossier-inner {
  align-items: center;
  background: var(--color-bg-elevated);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-xl);
  text-align: center;
  width: 100%;
}

.dossier-portrait {
  border-radius: var(--radius-circle);
  height: 140px;
  object-fit: cover;
  width: 140px;
}

.dossier-name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  margin: 0;
}

.dossier-role {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-wide);
  margin: 0;
}

.dossier-bio {
  color: var(--color-text);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  margin: var(--space-sm) auto 0;
  max-width: 640px;
}

.dossier-expertise {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  justify-content: center;
  list-style: none;
  margin: var(--space-sm) 0 0;
  padding: 0;
}

.dossier-expertise li {
  background: rgba(219, 154, 81, 0.12);
  border: 1px solid rgba(219, 154, 81, 0.4);
  border-radius: var(--radius-pill);
  color: var(--color-accent);
  font-size: var(--fs-micro);
  padding: var(--space-2xs) var(--space-sm);
}

/* Author articles list — sits under the card on /about-us/ */
.dossier-articles {
  margin-inline: auto;
  max-width: 820px;
  padding-block: var(--space-lg);
  width: 100%;
}

.dossier-articles-heading {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--space-md);
}

.dossier-articles-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.dossier-articles-item {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  padding-block: var(--space-xs);
}

.dossier-articles-item time {
  color: var(--color-text-muted);
  font-size: var(--fs-micro);
  margin-left: var(--space-xs);
}

.dossier-articles-item a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dossier-articles-item a:hover {
  color: var(--color-accent-pressed);
  text-decoration-thickness: 2px;
}


/* =========================================================================
   Component — contact-form (FORM-08 Asymmetric Wide Submit) — .buffet
   ========================================================================= */
.buffet {
  margin-inline: auto;
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
  padding-block: var(--space-2xl);
  padding-inline: var(--container-padding-desktop);
}

.buffet-intro {
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  margin: 0 0 var(--space-lg);
  max-width: 720px;
}

.buffet-form {
  background: var(--color-bg-elevated);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-xl);
}

.buffet-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.buffet-label {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
}

.buffet-input,
.buffet-textarea {
  background: var(--color-bg);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  padding: var(--space-sm) var(--space-md);
  transition: border-color var(--dur-fast);
}

.buffet-input:focus,
.buffet-textarea:focus {
  border-color: var(--color-accent);
  outline: none;
}

.buffet-textarea {
  min-height: 160px;
  resize: vertical;
}

.buffet-submit {
  background: var(--color-accent);
  border-radius: var(--radius-pill);
  color: var(--color-bg);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  height: 72px;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  transition: background var(--dur-fast), color var(--dur-fast);
  width: 100%;
}

.buffet-submit:hover {
  background: var(--color-accent-pressed);
  color: var(--color-bg);
}

.buffet-success {
  background: rgba(0, 128, 0, 0.12);
  border: 1px solid rgba(0, 128, 0, 0.4);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--fs-body);
  margin-top: var(--space-md);
  padding: var(--space-md);
}

.buffet-success[hidden] {
  display: none;
}


/* =========================================================================
   Component — cta-block (CTA-01 Full-Width Strip on Accent) — .cloche
   ========================================================================= */
.cloche {
  background: var(--color-accent);
  padding-block: var(--space-2xl);
}

.cloche-inner {
  align-items: center;
  display: flex;
  gap: var(--space-lg);
  justify-content: space-between;
  margin-inline: auto;
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
  padding-inline: var(--container-padding-desktop);
}

.cloche-text {
  max-width: 720px;
}

.cloche-title {
  color: var(--color-bg);
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  margin: 0;
  text-transform: uppercase;
}

.cloche-description {
  color: rgba(1, 43, 32, 0.85);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  margin: var(--space-sm) 0 0;
  max-width: 580px;
}

.cloche-button {
  background: var(--color-bg);
  border-radius: var(--radius-pill);
  color: var(--color-accent);
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  height: 56px;
  letter-spacing: var(--ls-wide);
  line-height: 56px;
  min-width: 220px;
  padding-inline: var(--space-2xl);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: background var(--dur-fast), color var(--dur-fast);
}

.cloche-button:hover {
  background: var(--color-text);
  color: var(--color-primary);
}

@media (max-width: 940px) {
  .cloche-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .cloche-button {
    width: 100%;
  }
}


/* =========================================================================
   Component — cookie-banner (COOK-02 Full-Width Bottom Strip) — .coffre
   ========================================================================= */
.coffre {
  background: var(--color-primary);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  bottom: 0;
  left: 0;
  padding-block: var(--space-md);
  padding-inline: var(--container-padding-desktop);
  position: fixed;
  right: 0;
  z-index: 90;
}

.coffre[hidden] {
  display: none;
}

.coffre-inner {
  align-items: center;
  display: flex;
  gap: var(--space-md);
  justify-content: space-between;
  margin-inline: auto;
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
}

.coffre-message {
  color: var(--color-text-muted);
  flex: 1;
  font-size: var(--fs-small);
  margin: 0;
}

.coffre-actions {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-sm);
}

.coffre-button {
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  padding: var(--space-sm) var(--space-lg);
  transition: background var(--dur-fast), color var(--dur-fast);
}

.coffre-button--accept {
  background: var(--color-accent);
  color: var(--color-bg);
}

.coffre-button--accept:hover {
  background: var(--color-accent-pressed);
  color: var(--color-bg);
}

.coffre-button--decline {
  background: transparent;
  border: 1px solid var(--color-text-muted);
  color: var(--color-text);
}

.coffre-button--decline:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text);
}

@media (max-width: 720px) {
  .coffre,
  .coffre-inner {
    padding: 12px 14px !important;
    gap: 8px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
  .coffre-inner {
    flex-direction: column;
    align-items: stretch;
  }
  .coffre-actions {
    flex-direction: row;
    width: 100%;
  }
  .coffre-button {
    flex: 1;
    padding: 8px 14px !important;
    font-size: 12px !important;
    min-height: 36px !important;
  }
}


/* =========================================================================
   Component — data-table (TABLE-05 Compact Dense) — .fenetre
   ========================================================================= */
.fenetre-wrap {
  margin-inline: auto;
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
  overflow-x: auto;
  padding-block: var(--space-xl);
  padding-inline: var(--container-padding-desktop);
}

.fenetre {
  border-collapse: collapse;
  font-size: var(--fs-small);
  width: 100%;
}

.fenetre thead {
  background: var(--color-bg-elevated);
}

.fenetre th {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  padding: var(--space-sm);
  position: sticky;
  text-align: left;
  text-transform: uppercase;
  top: 0;
  z-index: 1;
}

.fenetre td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: var(--space-xs) var(--space-sm);
}


/* =========================================================================
   Component — error-block (ERR-01 Centered Hero-Style) — .enseigne
   ========================================================================= */
.enseigne {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-inline: auto;
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
  min-height: calc(100vh - 320px);
  padding-block: var(--space-3xl);
  padding-inline: var(--container-padding-desktop);
  text-align: center;
}

.enseigne-number {
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: clamp(80px, 18vw, 200px);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  margin: 0;
}

.enseigne-title {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  margin: 0;
  max-width: 720px;
}

.enseigne-text {
  color: var(--color-text-muted);
  font-size: var(--fs-h5);
  line-height: var(--lh-normal);
  margin: 0;
  max-width: 600px;
}

.enseigne-button {
  background: var(--color-accent);
  border-radius: var(--radius-pill);
  color: var(--color-bg);
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  height: 52px;
  letter-spacing: var(--ls-wide);
  line-height: 52px;
  padding-inline: var(--space-xl);
  text-decoration: none;
  text-transform: uppercase;
  transition: background var(--dur-fast), color var(--dur-fast);
}

.enseigne-button:hover {
  background: var(--color-accent-pressed);
  color: var(--color-bg);
}


/* =========================================================================
   Component — faq (FAQ-03 Two-Column Card-Style) — .paroi
   ========================================================================= */
.paroi {
  margin-inline: auto;
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
  padding-block: var(--space-xl);
  padding-inline: var(--container-padding-desktop);
}

.paroi-heading {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--space-lg);
}

.paroi-list {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.paroi-item {
  background: var(--color-bg);
  border: 1px solid rgba(191, 191, 191, 0.15);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.paroi-q {
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  line-height: var(--lh-normal);
  margin: 0 0 var(--space-md);
}

.paroi-q::before {
  color: var(--color-accent);
  content: 'Q. ';
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  margin-right: var(--space-2xs);
}

.paroi-a {
  color: var(--color-text);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  margin: 0;
}

@media (max-width: 940px) {
  .paroi-list {
    grid-template-columns: 1fr;
  }
}


/* =========================================================================
   Component — footer (FOOT-02 Two-Row Brand + Nav) — .lisere
   ========================================================================= */
.lisere {
  background: var(--color-bg);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-block: var(--space-xl);
}

.lisere-inner {
  margin-inline: auto;
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
  padding-inline: var(--container-padding-desktop);
}

.lisere-row {
  align-items: center;
  display: flex;
  gap: var(--space-md);
  justify-content: space-between;
}

.lisere-row--top {
  padding-bottom: var(--space-md);
}

.lisere-row--bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: var(--space-md);
}

.lisere-logo {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
}

.lisere-logo-img {
  height: 72px;
  width: auto;
}

.lisere-nav {
  flex: 1;
}

.lisere-nav-list,
.lisere-legal-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: flex-end;
  list-style: none;
  margin: 0;
  padding: 0;
}

.lisere-nav-list a,
.lisere-legal-list a {
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  text-decoration: none;
  transition: color var(--dur-fast);
}

.lisere-nav-list a:hover,
.lisere-legal-list a:hover {
  color: var(--color-text);
}

.lisere-legal-list {
  font-size: var(--fs-micro);
  gap: var(--space-sm);
}

.lisere-copy {
  color: var(--color-text-muted);
  font-size: var(--fs-micro);
  margin: 0;
}

.lisere-rg {
  color: var(--color-text-muted);
  font-size: var(--fs-micro);
  margin: var(--space-md) 0 0;
  text-align: center;
}

@media (max-width: 940px) {
  .lisere-row {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  .lisere-nav-list,
  .lisere-legal-list {
    justify-content: flex-start;
  }
}


/* =========================================================================
   Component — header (HEAD-06 Magazine Logo + Top Date + AUTH-LOGIN)
   STICKY-04 Hide-on-scroll-down. NAV-03 Two-Row Editorial. — .comptoir
   ========================================================================= */
.comptoir {
  background: var(--color-bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  transition: transform var(--dur-base) var(--ease-out);
  z-index: 100;
}

.comptoir.is-hidden {
  transform: translateY(-100%);
}

.comptoir-inner {
  align-items: center;
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: auto 1fr auto;
  margin-inline: auto;
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
  min-height: var(--header-height-desktop);
  padding-inline: var(--space-md);
}

.comptoir-logo {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
}

.comptoir-logo-img {
  display: block;
  flex-shrink: 0;
  height: 90px;
  width: auto;
}

.comptoir-nav {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  justify-content: center;
}

.comptoir-nav-list {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-sm);
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.comptoir-nav-list--bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: var(--space-2xs);
}

.comptoir-nav-list--top {
  padding-bottom: var(--space-2xs);
}

.comptoir-nav-item {
  display: inline-flex;
}

.comptoir-link {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  padding-block: var(--space-2xs);
  text-decoration: none;
  transition: color var(--dur-fast);
  white-space: nowrap;
}

.comptoir-link:hover {
  color: var(--color-accent);
}

.comptoir-link[aria-current='page'] {
  color: var(--color-accent);
}

.comptoir-right {
  align-items: center;
  display: flex;
  gap: var(--space-md);
  justify-content: flex-end;
}

.comptoir-date {
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  white-space: nowrap;
}

.comptoir-auth {
  align-items: center;
  display: inline-flex;
  gap: var(--space-sm);
}

.comptoir-auth-btn {
  border-radius: var(--radius-pill);
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  padding-inline: var(--space-lg);
  padding-block: var(--space-xs);
  text-decoration: none;
  text-transform: uppercase;
  transition: background var(--dur-fast), color var(--dur-fast);
  white-space: nowrap;
}

.comptoir-auth-btn--login {
  background: transparent;
  border: 1px solid var(--color-text);
  color: var(--color-text);
}

.comptoir-auth-btn--login:hover {
  background: var(--color-text);
  color: var(--color-bg);
}

.comptoir-toggle {
  align-items: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  color: var(--color-text);
  display: none;
  height: 44px;
  justify-content: center;
  margin-left: auto !important;
  width: 44px;
}

.comptoir-toggle-bar {
  background: var(--color-text);
  display: block;
  height: 2px;
  margin: 3px 0;
  width: 22px;
}

/* Mobile drawer — flat list of all nav items */
.comptoir-mobile {
  background: var(--color-bg);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: none;
  left: 0;
  padding: var(--space-md);
  position: absolute;
  right: 0;
  top: 100%;
}

.comptoir-mobile.is-open {
  display: block;
}

.comptoir-mobile-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.comptoir-mobile-list a {
  color: var(--color-text);
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-body);
  padding: var(--space-sm);
  text-decoration: none;
}

.comptoir-mobile-list a[aria-current='page'] {
  color: var(--color-accent);
}

@media (max-width: 940px) {
  .comptoir-inner {
    grid-template-columns: auto auto;
    min-height: var(--header-height-mobile);
  }
  .comptoir-logo-img {
    height: 64px;
  }
  .comptoir-nav,
  .comptoir-right {
    display: none;
  }
  .comptoir-toggle {
    display: inline-flex;
  }
}


/* =========================================================================
   Component — hero (HERO-12 Editorial Long-Read Opening) — .feuille
   ========================================================================= */
.feuille {
  margin-inline: auto;
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
  padding-block: var(--space-2xl) var(--space-xl);
  padding-inline: var(--container-padding-desktop);
}

.feuille-text {
  margin-inline: auto;
  max-width: 760px;
  text-align: center;
}

.feuille-kicker {
  color: var(--color-accent);
  font-size: var(--fs-small);
  font-style: italic;
  letter-spacing: var(--ls-wide);
  margin: 0 0 var(--space-md);
}

.feuille-title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  margin: 0;
  text-transform: capitalize;
}

.feuille-lead {
  color: var(--color-text-muted);
  font-size: var(--fs-h5);
  font-style: italic;
  line-height: var(--lh-normal);
  margin: var(--space-lg) auto 0;
  max-width: 600px;
}

.feuille-meta {
  color: var(--color-text-muted);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  margin: var(--space-lg) 0 0;
}

.feuille-meta a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.feuille-meta a:hover {
  color: var(--color-accent);
}

.feuille-figure {
  margin: var(--space-2xl) 0 0;
}

.feuille-figure img {
  aspect-ratio: 21 / 9;
  border-radius: var(--radius-lg);
  object-fit: cover;
  width: 100%;
}

.feuille-figure figcaption {
  color: var(--color-text-muted);
  font-size: var(--fs-micro);
  font-style: italic;
  padding-top: var(--space-xs);
  text-align: center;
}


/* =========================================================================
   Component — inline-cta (INLINE-CTA-06 Dual-Button Mini Bar) — .secteur
   ========================================================================= */
.secteur {
  margin-inline: auto;
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
  padding-block: var(--space-md);
  padding-inline: var(--container-padding-desktop);
}

.secteur-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-inline: auto;
  max-width: 600px;
  text-align: center;
}

.secteur-text {
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  margin: 0;
}

.secteur-actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
}

.secteur-btn {
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  padding: var(--space-sm) var(--space-lg);
  text-decoration: none;
  text-transform: uppercase;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}

.secteur-btn--primary {
  background: var(--color-accent);
  color: var(--color-bg);
}

.secteur-btn--primary:hover {
  background: var(--color-accent-pressed);
  color: var(--color-bg);
}

.secteur-btn--ghost {
  background: transparent;
  border: 1px solid var(--color-text-muted);
  color: var(--color-text);
}

.secteur-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--color-text);
  color: var(--color-text);
}

@media (max-width: 620px) {
  .secteur-actions {
    flex-direction: column;
  }
  .secteur-btn {
    width: 100%;
  }
}


/* =========================================================================
   Component — items-grid (GRID-03 Two-Column Asymmetric Widths) — .mosaique
   ========================================================================= */
.mosaique {
  margin-inline: auto;
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
  padding-block: var(--space-xl);
  padding-inline: var(--container-padding-desktop);
}

.mosaique-heading {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--space-lg);
}

.mosaique-list {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mosaique-item {
  background: var(--color-bg-elevated);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.mosaique-item-title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-sm);
}

.mosaique-item-text {
  color: var(--color-text);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  margin: 0;
}

@media (min-width: 941px) {
  .mosaique-list {
    grid-template-columns: 3fr 2fr;
  }
  .mosaique-item:nth-child(4n + 3),
  .mosaique-item:nth-child(4n + 4) {
    /* even rows flip the ratio */
  }
  .mosaique-list > .mosaique-item:nth-child(4n + 3) {
    grid-column: 1 / 2;
  }
  .mosaique-list > .mosaique-item:nth-child(4n + 4) {
    grid-column: 2 / 3;
  }
  /* explicit columns produced visually via grid auto-flow */
  .mosaique-list {
    grid-auto-flow: dense;
    grid-template-columns: 3fr 2fr;
  }
}


/* =========================================================================
   Component — legal-section (LEGAL-04 Bordered Article Box) — .repere
   ========================================================================= */
.repere {
  margin-inline: auto;
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
  padding-block: var(--space-2xl);
  padding-inline: var(--container-padding-desktop);
}

.repere-box {
  background: var(--color-bg-elevated);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-2xl);
  position: relative;
}

.repere-updated {
  color: var(--color-text-muted);
  font-size: var(--fs-micro);
  position: absolute;
  right: var(--space-md);
  top: var(--space-md);
}

.repere-intro {
  color: var(--color-text);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  margin: 0 0 var(--space-lg);
}

.repere-section {
  margin-block: var(--space-xl) 0;
}

.repere-section h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--space-sm);
}

.repere-section p {
  color: var(--color-text);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  margin: 0 0 var(--space-sm);
}

.repere-support {
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-md);
  margin-top: var(--space-xl);
  padding: var(--space-md) var(--space-lg);
}

.repere-support h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--space-sm);
}

.repere-support ul {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  margin: 0;
  padding-left: var(--space-lg);
}

.repere-disclaimer {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  font-style: italic;
  margin-top: var(--space-xl);
}


/* =========================================================================
   Component — page-header (PHEAD-10 Manifesto-Style) — .plaque
   ========================================================================= */
.plaque {
  margin-inline: auto;
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
  padding-block: var(--space-3xl);
  padding-inline: var(--container-padding-desktop);
  text-align: center;
}

.plaque-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 7vw, 80px);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  margin: 0;
}

.plaque-divider {
  color: var(--color-accent);
  font-size: var(--fs-h2);
  margin: var(--space-md) 0;
}

.plaque-description {
  color: var(--color-text-muted);
  font-size: var(--fs-h4);
  font-style: italic;
  line-height: var(--lh-normal);
  margin: 0 auto;
  max-width: 600px;
}

.plaque-meta {
  color: var(--color-text-muted);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  margin-top: var(--space-md);
}


/* =========================================================================
   Component — prose (PROSE-07 Numbered Section Headers) — .linteau
   ========================================================================= */
.linteau {
  counter-reset: section;
  margin-inline: auto;
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
  padding-block: var(--space-xl);
  padding-inline: var(--container-padding-desktop);
}

.linteau-body {
  margin-inline: auto;
  max-width: var(--container-readable);
}

.linteau h2 {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  margin: var(--space-xl) 0 var(--space-md);
}

.linteau h2::before {
  color: var(--color-accent);
  content: counter(section, decimal-leading-zero) '. ';
  counter-increment: section;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  margin-right: var(--space-sm);
}

.linteau h3 {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  margin: var(--space-lg) 0 var(--space-sm);
}

.linteau p {
  color: var(--color-text);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  margin: 0 0 var(--space-md);
}

.linteau ul,
.linteau ol {
  color: var(--color-text);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  margin: 0 0 var(--space-md);
  padding-left: var(--space-lg);
}

.linteau li {
  margin-bottom: var(--space-xs);
}

.linteau strong {
  color: var(--color-text);
  font-weight: var(--fw-bold);
}

.linteau a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--dur-fast);
}

.linteau a:hover {
  color: var(--color-accent-pressed);
  text-decoration-thickness: 2px;
}


/* =========================================================================
   Component — reviews (REV-04 Featured + List) — .balise
   ========================================================================= */
.balise {
  margin-inline: auto;
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
  padding-block: var(--space-xl);
  padding-inline: var(--container-padding-desktop);
}

.balise-heading {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--space-lg);
}

.balise-featured {
  background: rgba(0, 53, 38, 0.4);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-2xl);
  padding: var(--space-2xl);
}

.balise-featured-stars {
  color: var(--color-accent);
  font-size: 28px;
  letter-spacing: 2px;
  margin: 0 0 var(--space-md);
}

.balise-featured-text {
  color: var(--color-text);
  font-size: var(--fs-h4);
  font-style: italic;
  line-height: var(--lh-normal);
  margin: 0;
}

.balise-featured-cite {
  color: var(--color-text-muted);
  display: block;
  font-size: var(--fs-small);
  font-style: normal;
  margin-top: var(--space-md);
}

.balise-list {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.balise-item {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: var(--space-md) 0;
}

.balise-item-head {
  align-items: center;
  display: flex;
  gap: var(--space-sm);
  justify-content: space-between;
}

.balise-item-author {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
}

.balise-item-rating {
  color: var(--color-accent);
  font-size: var(--fs-small);
}

.balise-item-text {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  margin: var(--space-xs) 0 0;
}

.balise-item-date {
  color: var(--color-text-muted);
  font-size: var(--fs-micro);
  margin-left: var(--space-xs);
}

@media (max-width: 940px) {
  .balise-list {
    grid-template-columns: 1fr;
  }
}


/* =========================================================================
   Page-level — body section utility (markdown rendered sections under hero)
   ========================================================================= */
.linteau figure {
  margin: var(--space-lg) 0;
}

.linteau figure img {
  border-radius: var(--radius-md);
  width: 100%;
}

.linteau figure figcaption {
  color: var(--color-text-muted);
  font-size: var(--fs-micro);
  font-style: italic;
  margin-top: var(--space-xs);
  text-align: center;
}


/* =========================================================================
   Utility — page-image (per-page context image rendered above prose)
   ========================================================================= */
.page-image {
  margin-inline: auto;
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
  padding-block: var(--space-lg);
  padding-inline: var(--container-padding-desktop);
}

.page-image img {
  border-radius: var(--radius-lg);
  width: 100%;
}

.page-image figcaption {
  color: var(--color-text-muted);
  font-size: var(--fs-micro);
  font-style: italic;
  margin-top: var(--space-xs);
  text-align: center;
}