.conditions-generales {
  background:
    radial-gradient(circle at 58% 4%, rgba(110, 53, 168, 0.14), transparent 25rem),
    var(--color-fond-nocturne);
}

.conditions-generales__hero {
  background: linear-gradient(180deg, var(--color-fond-encre), var(--color-fond-nocturne));
}

.conditions-generales__hero-grid,
.conditions-generales__offset-grid,
.conditions-generales__nature-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-5);
}

.conditions-generales__hero-copy {
  grid-column: 2 / span 8;
  min-width: 0;
  max-width: 53.125rem;
}

.conditions-generales__hero-copy .intro {
  max-width: 45rem;
}

.conditions-generales__updated {
  display: inline-block;
  margin-bottom: 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-violet-sorcier);
  color: var(--color-lavande-cendre);
  font-size: var(--text-small);
  font-weight: 700;
}

.conditions-generales__reading {
  padding-top: 0;
}

.conditions-generales__reading-panel {
  position: relative;
  width: 100%;
  min-width: 0;
  margin-inline: auto;
  padding: clamp(var(--space-5), 4vw, var(--space-7));
  border: var(--border-subtle);
  background: var(--color-prune-panneau);
}

.conditions-generales__reading-panel::after {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid color-mix(in srgb, var(--color-violet-sorcier) 35%, transparent);
  content: "";
  opacity: 0.55;
  transform: rotate(45deg);
}

.conditions-generales__reading-panel > * {
  min-width: 0;
}

.conditions-generales__reading-panel h2 {
  font-size: var(--text-heading-small);
}

.conditions-generales__reading-intro {
  max-width: 38.75rem;
  color: var(--color-lavande-cendre);
}

.conditions-generales__toc {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-5);
  margin: var(--space-5) 0 0;
  padding-left: 1.5rem;
}

.conditions-generales__toc > li {
  min-width: 0;
  padding-left: var(--space-1);
}

.conditions-generales__toc a {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  align-items: center;
  color: var(--color-blanc-froid);
}

.conditions-generales__offset-grid {
  align-items: start;
}

.conditions-generales__section-mark {
  grid-column: 2;
  width: 100%;
  min-width: 0;
  padding-top: var(--space-2);
  color: var(--color-violet-sorcier);
  font-size: var(--text-meta);
  font-weight: 700;
  letter-spacing: 0.16em;
}

.conditions-generales__legal-copy {
  grid-column: 3 / span 7;
  width: 100%;
  min-width: 0;
  max-width: 47.5rem;
}

.conditions-generales__legal-copy > *,
.conditions-generales__property-copy > *,
.conditions-generales__closing-copy > *,
.conditions-generales__nature-copy > *,
.conditions-generales__usage-copy > *,
.conditions-generales__requests-copy > * {
  min-width: 0;
}

.conditions-generales__unit {
  width: 100%;
  min-width: 0;
  max-width: 42.5rem;
  padding-top: var(--space-5);
  border-top: var(--border-subtle);
}

.conditions-generales__unit h3 {
  margin-bottom: var(--space-3);
}

.conditions-generales__contact-lines {
  max-width: 47.5rem;
}

.conditions-generales__contact-lines dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: 0;
}

.conditions-generales__contact-lines dl > div {
  display: grid;
  grid-template-columns: minmax(7rem, 0.3fr) minmax(0, 1fr);
  gap: var(--space-4);
  min-width: 0;
}

.conditions-generales__contact-lines dd {
  min-width: 0;
  margin: 0;
}

.conditions-generales__usage {
  background: linear-gradient(180deg, var(--color-fond-nocturne), var(--color-fond-encre));
}

.conditions-generales__usage-panel,
.conditions-generales__requests-panel {
  display: grid;
  width: 100%;
  min-width: 0;
  border: var(--border-subtle);
  background: var(--color-prune-panneau);
}

.conditions-generales__usage-panel {
  grid-template-columns: repeat(9, minmax(0, 1fr));
  padding: clamp(1.75rem, 4vw, 3rem);
}

.conditions-generales__usage-copy {
  grid-column: 1 / span 7;
  width: 100%;
  min-width: 0;
  max-width: 42.5rem;
}

.conditions-generales__usage-copy ul {
  max-width: 42.5rem;
  margin-bottom: 0;
}

.conditions-generales__nature-grid {
  align-items: start;
}

.conditions-generales__nature-copy {
  grid-column: 3 / span 8;
  width: 100%;
  min-width: 0;
  max-width: 42.5rem;
}

.conditions-generales__clarification {
  width: calc(100% - var(--space-6));
  min-width: 0;
  max-width: 38.75rem;
  margin: var(--space-6) 0 var(--space-6) var(--space-6);
  padding: var(--space-5);
  border: var(--border-accent);
  background: var(--color-fond-encre);
  box-shadow: var(--glow-violet);
}

.conditions-generales__clarification p {
  margin-bottom: 0;
}

.conditions-generales__property {
  background: var(--color-fond-encre);
}

.conditions-generales__property-copy,
.conditions-generales__closing-copy {
  width: 58.333%;
  min-width: 0;
  max-width: 41.875rem;
  margin-inline: auto;
}

.conditions-generales__property-copy {
  border-left: 2px solid color-mix(in srgb, var(--color-orange-oranger) 70%, transparent);
  padding-left: var(--space-5);
}

.conditions-generales__requests-panel {
  grid-template-columns: minmax(0, 7fr) minmax(16.25rem, 3fr);
  gap: var(--space-6);
  padding: clamp(1.75rem, 4vw, 3rem);
}

.conditions-generales__requests-copy {
  grid-column: 1;
  width: 100%;
  min-width: 0;
  max-width: 42.5rem;
}

.conditions-generales__contact-note {
  grid-column: 2;
  width: 100%;
  min-width: 0;
  max-width: 18.75rem;
  padding: var(--space-5);
  border: var(--border-subtle);
  background: var(--color-prune-surface);
  align-self: start;
}

.conditions-generales__contact-note p {
  margin-bottom: var(--space-3);
}

.conditions-generales__contact-note a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  overflow-wrap: anywhere;
}

.conditions-generales__closing {
  background: linear-gradient(180deg, var(--color-fond-nocturne), var(--color-fond-encre));
}

.conditions-generales__legal-contact {
  display: flex;
  width: 100%;
  min-width: 0;
  max-width: 33.75rem;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin-top: var(--space-7);
  padding: var(--space-5);
  border: var(--border-accent);
  background: var(--color-prune-surface);
}

.conditions-generales__legal-contact h3,
.conditions-generales__legal-contact p {
  margin: 0;
}

.conditions-generales__legal-contact .button {
  min-width: 0;
}

.conditions-generales [id] {
  scroll-margin-top: var(--space-8);
}

@media (min-width: 51.3125rem) {
  .conditions-generales__reading-panel {
    width: 83.333%;
  }
}

@media (max-width: 57.5rem) {
  .conditions-generales__hero-copy {
    grid-column: 1 / -1;
    max-width: none;
  }

  .conditions-generales__section-mark {
    display: none;
  }

  .conditions-generales__legal-copy {
    grid-column: 1 / -1;
    max-width: 47.5rem;
  }

  .conditions-generales__usage-panel {
    grid-template-columns: 1fr;
  }

  .conditions-generales__usage-copy {
    grid-column: 1;
    max-width: 42.5rem;
  }

  .conditions-generales__nature-copy {
    grid-column: 1 / -1;
  }

  .conditions-generales__clarification {
    width: 100%;
    margin-left: 0;
  }

  .conditions-generales__requests-panel {
    grid-template-columns: 1fr;
  }

  .conditions-generales__requests-copy,
  .conditions-generales__contact-note {
    grid-column: 1;
  }

  .conditions-generales__contact-note {
    max-width: none;
  }
}

@media (max-width: 51.25rem) {
  .conditions-generales__reading-panel {
    padding: var(--space-5);
  }

  .conditions-generales__toc {
    grid-template-columns: 1fr;
  }

  .conditions-generales__property-copy,
  .conditions-generales__closing-copy {
    width: 100%;
    max-width: 41.875rem;
    margin-inline: 0;
  }
}

@media (max-width: 38.75rem) {
  .conditions-generales__hero-copy h1 {
    font-size: clamp(2.75rem, 13vw, 4.25rem);
    line-height: 0.96;
  }

  .conditions-generales__hero-copy .intro {
    font-size: 1.0625rem;
    line-height: 1.6;
  }

  .conditions-generales__usage-panel,
  .conditions-generales__requests-panel {
    padding: var(--space-5);
  }

  .conditions-generales__clarification,
  .conditions-generales__contact-note,
  .conditions-generales__legal-contact {
    padding: var(--space-5);
  }

  .conditions-generales__contact-lines dl > div {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .conditions-generales__property-copy {
    padding-left: var(--space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .conditions-generales__clarification {
    box-shadow: none;
  }
}

@media (prefers-contrast: more) {
  .conditions-generales__reading-panel::after {
    display: none;
  }
}