/* ==========================================================================
   À Corps Zen — Landing page
   Figma: Nb2zh89WnLfHTykT1qcgYa (node 79-1030)

   Table of contents
   1.  Design tokens
   2.  Base & typography
   3.  Shared components (buttons, titles, checklists, forms, icons)
   4.  Header
   5.  Hero
   6.  Booking bar
   7.  About
   8.  Services
   9.  Coaching
   10. Approach
   11. Team
   12. Testimonials
   13. Policy
   14. Contact / Footer
   15. Utilities & animations
   16. Responsive — <= 1199px / <= 991px / <= 767px / <= 575px
   17. Merci page (merci.html) — self-contained, own breakpoints
   18. Legal page (politique-confidentialite.html) — self-contained
   19. Cookie consent — banner + preferences dialog
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* Brand colours */
  --acz-navy: #012736;
  --acz-navy-deep: #152a37;
  --acz-ink: #02121b;
  --acz-amber: #e29b00;
  --acz-amber-dark: #c28500;
  --acz-amber-light: #f2ae1a;

  /* Neutrals */
  --acz-black: #000000;
  --acz-white: #ffffff;
  --acz-grey-bg: #f4f4f4;
  --acz-grey-soft: #eef1f3;
  --acz-card: rgba(202, 212, 213, 0.5);
  --acz-card-hover: rgba(202, 212, 213, 0.75);
  --acz-field: rgba(202, 213, 213, 0.3);
  --acz-muted: #6e7191;
  --acz-rule: #d9d9d9;
  --acz-blue-deep: #0a0d60;

  /* Typography — Poppins throughout. The two tokens are kept separate so a
     display face can be reintroduced for headings without touching each rule. */
  --acz-font-title: "Poppins", "Segoe UI", system-ui, sans-serif;
  --acz-font-body: "Poppins", "Segoe UI", system-ui, sans-serif;

  /* Radii & shadows */
  --acz-radius: 10px;
  --acz-radius-btn: 8px;
  --acz-shadow-card: 0 6px 5px rgba(0, 0, 0, 0.08);
  --acz-shadow-lift: 0 14px 28px rgba(1, 39, 54, 0.18);

  /* Rhythm */
  --acz-section-y: 90px;
  --acz-transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Design canvas is 1920px wide with a 1248px content column. */
@media (min-width: 1400px) {

  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1272px;
  }
}

/* ==========================================================================
   2. BASE & TYPOGRAPHY
   ========================================================================== */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 126px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--acz-font-body);
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: var(--acz-black);
  background-color: var(--acz-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--acz-transition);
}

a:hover {
  color: var(--acz-amber);
}

:focus-visible {
  outline: 3px solid var(--acz-amber);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  z-index: 1080;
  top: 8px;
  left: 8px;
  padding: 10px 18px;
  background: var(--acz-amber);
  color: var(--acz-white);
  border-radius: var(--acz-radius-btn);
}

/* ==========================================================================
   3. SHARED COMPONENTS
   ========================================================================== */

/* --- Section headings ---------------------------------------------------- */
.acz-eyebrow {
  margin: 0 0 9px;
  font-family: var(--acz-font-body);
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: var(--acz-navy-deep);
}

.acz-eyebrow--caps {
  font-size: 13.75px;
  letter-spacing: -0.14px;
  text-transform: uppercase;
  color: #161519;
}

.acz-title {
  margin: 0;
  font-family: var(--acz-font-title);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  color: var(--acz-black);
}

.acz-title--light {
  color: var(--acz-white);
}

.acz-section-head {
  margin-bottom: 36px;
}

.acz-section-head__rule {
  display: block;
  width: 157px;
  height: 4px;
  margin: 15px auto 0;
  background: var(--acz-navy-deep);
}

/* --- Body copy ----------------------------------------------------------- */
.acz-text {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: var(--acz-black);
}

.acz-text--sm {
  font-size: 16px;
}

.acz-text--light {
  color: var(--acz-white);
}

.acz-text--strong {
  font-weight: 600;
  margin-bottom: 8px;
}

.acz-text strong {
  font-weight: 600;
}

/* --- Checklists ---------------------------------------------------------- */
.acz-checklist {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
}

.acz-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  line-height: 24px;
}

.acz-checklist img {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 3px;
}

.acz-checklist--light li {
  color: var(--acz-white);
}

/* --- Buttons ------------------------------------------------------------- */
.btn-acz-primary,
.btn-acz-outline,
.btn-acz-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 55px;
  padding: 4px 24px;
  border-radius: var(--acz-radius-btn);
  font-family: var(--acz-font-title);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  border: 2px solid transparent;
  transition: background-color var(--acz-transition),
    border-color var(--acz-transition),
    color var(--acz-transition),
    transform var(--acz-transition),
    box-shadow var(--acz-transition);
}

.btn-acz-primary {
  min-width: 304px;
  background-color: var(--acz-amber);
  border-color: var(--acz-amber);
  color: var(--acz-white);
}

.btn-acz-primary:hover,
.btn-acz-primary:focus-visible {
  background-color: var(--acz-amber-dark);
  border-color: var(--acz-amber-dark);
  color: var(--acz-white);
  transform: translateY(-2px);
  box-shadow: var(--acz-shadow-lift);
}

.btn-acz-primary:active {
  background-color: var(--acz-amber-dark);
  transform: translateY(0);
  box-shadow: none;
}

.btn-acz-outline {
  min-width: 306px;
  min-height: 66px;
  background-color: transparent;
  border-color: var(--acz-amber);
  color: var(--acz-white);
  font-size: 20px;
}

.btn-acz-outline:hover,
.btn-acz-outline:focus-visible {
  background-color: var(--acz-amber);
  color: var(--acz-white);
  transform: translateY(-2px);
}

.btn-acz-outline:active {
  transform: translateY(0);
}

.btn-acz-dark {
  min-width: 238px;
  background-color: var(--acz-ink);
  border-color: var(--acz-ink);
  color: var(--acz-white);
}

/* Hover swaps the ink fill for the brand amber, matching .btn-acz-primary.
   White on amber is 2.35:1, which is under AA -- that is the existing brand
   pairing used by every amber CTA on the site, not a new choice here. */
.btn-acz-dark:hover,
.btn-acz-dark:focus-visible {
  background-color: var(--acz-amber);
  border-color: var(--acz-amber);
  color: var(--acz-white);
  transform: translateY(-2px);
  box-shadow: var(--acz-shadow-lift);
}

.btn-acz-dark:active {
  transform: translateY(0);
}

.btn-acz-primary:disabled,
.btn-acz-outline:disabled,
.btn-acz-dark:disabled,
.btn-acz-primary.disabled {
  opacity: 0.55;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

.btn-arrow {
  width: 24px;
  height: 24px;
  transition: transform var(--acz-transition);
}

.btn-acz-primary:hover .btn-arrow,
.btn-acz-dark:hover .btn-arrow {
  transform: translateX(4px);
}

/* --- Form card ----------------------------------------------------------- */
.acz-form-card {
  padding: 24px;
  background-color: var(--acz-white);
  border-radius: var(--acz-radius);
  box-shadow: var(--acz-shadow-card);
}

.acz-form-card__title {
  margin: 0 0 16px;
  font-family: var(--acz-font-title);
  font-size: 18px;
  font-weight: 600;
  line-height: 25.2px;
  text-align: center;
  color: var(--acz-black);
}

.acz-input,
.acz-input:focus {
  padding: 16px;
  /* Poppins Regular in the Figma -- stated outright so the Medium body
     weight is not inherited into the fields. */
  font-weight: 400;
  background-color: var(--acz-field);
  border: 1px solid transparent;
  border-radius: 5px;
  font-family: var(--acz-font-body);
  font-size: 14px;
  line-height: 14px;
  color: var(--acz-black);
  box-shadow: none;
}

.acz-input::placeholder {
  color: var(--acz-muted);
  opacity: 1;
}

.acz-input:focus {
  background-color: rgba(202, 213, 213, 0.45);
  border-color: var(--acz-amber);
}

.acz-select {
  padding-right: 42px;
  color: var(--acz-muted);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236e7191' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
}

.acz-select:valid {
  color: var(--acz-black);
}

.acz-textarea {
  min-height: 138px;
  line-height: 20px;
  resize: vertical;
}

.acz-check .form-check-input {
  margin-top: 0.15rem;
  border-color: var(--acz-muted);
}

.acz-check .form-check-input:checked {
  background-color: var(--acz-amber);
  border-color: var(--acz-amber);
}

.acz-check .form-check-label {
  font-size: 14px;
  line-height: 17px;
  color: var(--acz-muted);
}

.acz-form .form-control:invalid.is-invalid,
.acz-form .form-select:invalid.is-invalid {
  border-color: #dc3545;
}

.acz-form__status {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: #1a7f4b;
}

.acz-form__status.is-error {
  color: #b42318;
}

.acz-form__status:empty {
  display: none;
}

/* --- Icon sizing --------------------------------------------------------- */
.icon-25 {
  width: 25px;
  height: 25px;
}

.icon-26 {
  width: 25px;
  height: 26px;
}

.icon-27 {
  width: 27px;
  height: 27px;
}

.icon-28 {
  width: 28px;
  height: 28px;
}

.icon-29 {
  width: 29px;
  height: 29px;
}

.icon-30 {
  width: 30px;
  height: 30px;
}

.icon-34 {
  width: 34px;
  height: 34px;
}

.icon-flip {
  transform: scaleX(-1);
}

/* ==========================================================================
   4. HEADER
   ========================================================================== */
#header {
  position: sticky;
  top: 0;
  z-index: 1030;
  min-height: 126px;
  display: flex;
  align-items: center;
  background-color: var(--acz-navy);
  transition: min-height var(--acz-transition), box-shadow var(--acz-transition);
}

#header.is-stuck {
  min-height: 92px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

/* The logo holds its size through the whole scroll -- only the bar around it
   compacts. No width transition, because there is no width change to animate. */
#header .acz-header__logo {
  width: 271px;
  max-width: 100%;
  height: auto;
}

#header .acz-header__nav {
  gap: 38px;
}

#header .nav-link {
  padding: 0;
  font-family: var(--acz-font-body);
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: var(--acz-white);
  position: relative;
}

#header .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background-color: var(--acz-amber);
  transition: width var(--acz-transition);
}

#header .nav-link:hover,
#header .nav-link:focus-visible,
#header .nav-link.is-active {
  color: var(--acz-amber);
}

#header .nav-link:hover::after,
#header .nav-link.is-active::after {
  width: 100%;
}

#header .acz-header__phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--acz-white);
}

#header .acz-header__phone:hover {
  color: var(--acz-white);
}

#header .acz-header__phone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 39px;
  height: 39px;
  border-radius: 7.78px;
  background-color: var(--acz-amber);
  transition: background-color var(--acz-transition), transform var(--acz-transition);
}

#header .acz-header__phone:hover .acz-header__phone-icon {
  background-color: var(--acz-amber-light);
  transform: scale(1.06);
}

#header .acz-header__phone-icon img {
  width: 31px;
  height: 31px;
}

#header .acz-header__phone-text {
  display: flex;
  flex-direction: column;
}

#header .acz-header__phone-label {
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
}

#header .acz-header__phone-number {
  font-size: 23px;
  font-weight: 600;
  line-height: 32px;
}

#header .navbar-toggler:focus {
  box-shadow: none;
}

/* ==========================================================================
   5. HERO
   ========================================================================== */
#hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 862px;
  padding: 120px 0 78px;
  background-image: url("../img/hero-bg.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  overflow: hidden;
}

#hero .acz-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(21, 42, 55, 0.15) 0%,
      rgba(21, 42, 55, 0) 31%,
      rgba(21, 42, 55, 0.92) 90%,
      rgba(21, 42, 55, 0.5) 100%);
}

#hero .acz-hero__title {
  margin: 0;
  /* Figma measures 659px against Gilroy; Poppins is wider, so the column is
     opened to 700px to keep the design's two-line break. */
  max-width: 700px;
  font-family: var(--acz-font-title);
  font-size: 42px;
  font-weight: 700;
  line-height: 60px;
  text-transform: uppercase;
  color: var(--acz-white);
}

#hero .acz-hero__rule {
  display: block;
  width: 74px;
  height: 4px;
  margin: 34px 0;
  background-color: var(--acz-white);
}

#hero .acz-hero__lead {
  max-width: 659px;
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  color: var(--acz-white);
}

#hero .acz-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 37px;
}

/* The two hero CTAs read as one pair, so they are sized as one. Left to their
   own rules they drift: the outline button carries min-height 66px and 20px
   type while the shared button rule gives the filled one 55px and 18px, which
   shows up as mismatched blocks the moment the row wraps. */
#hero .acz-hero__actions .btn-acz-outline,
#hero .acz-hero__actions .btn-acz-primary {
  min-width: 324px;
  min-height: 66px;
  font-size: 18px;
}

/* ==========================================================================
   6. BOOKING BAR
   ========================================================================== */
#booking {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 386px;
  padding: 60px 0;
  background-color: var(--acz-grey-bg);
  overflow: hidden;
}

#booking .acz-booking__media {
  position: absolute;
  inset: 0 auto 0 0;
  width: 45.5%;
  background-image: url("../img/booking-laptop.jpg");
  background-size: cover;
  background-position: center 58%;
  mix-blend-mode: darken;
}

#booking .acz-booking__leaf {
  position: absolute;
  top: -30px;
  right: -60px;
  width: 372px;
  height: auto;
  opacity: 0.17;
  transform: rotate(-82deg);
  pointer-events: none;
}

#booking .acz-booking__title {
  margin: 0 0 15px;
  max-width: 654px;
  font-family: var(--acz-font-title);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.28;
  text-transform: uppercase;
  color: var(--acz-black);
}

#booking .acz-booking__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
}

#booking .acz-booking__partner {
  width: 206px;
  height: auto;
}

/* ==========================================================================
   7. ABOUT
   ========================================================================== */
#about {
  padding: 88px 0 100px;
  background-color: var(--acz-white);
}

#about .acz-about__portrait {
  position: relative;
  margin: 0;
  border-radius: var(--acz-radius);
  overflow: hidden;
}

#about .acz-about__portrait>img {
  display: block;
  width: 100%;
  height: 639px;
  object-fit: cover;
  object-position: center;
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

#about .acz-about__portrait:hover>img {
  transform: scale(1.04);
}

/* Full-bleed white band sitting 36px above the bottom of the portrait */
#about .acz-about__badges {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 46px;
  padding: 6px 24px;
  background-color: var(--acz-white);
}

#about .acz-about__badge {
  display: block;
  flex: none;
}

#about .acz-about__badge--alliance {
  width: 96px;
  height: 56px;
  object-fit: contain;
}

/* The source file carries ~12% blank space top and bottom; cover crops it
   back to the tight 128x45 lockup used in the design. */
#about .acz-about__badge--ritma {
  width: 128px;
  height: 45px;
  object-fit: cover;
  object-position: center;
}

/* ==========================================================================
   8. SERVICES
   ========================================================================== */
#services {
  padding: 91px 0;
  background-color: var(--acz-grey-bg);
}

#services .acz-services__intro {
  margin-bottom: 26px;
}

#services .acz-services__category {
  margin: 0;
  font-family: var(--acz-font-title);
  font-size: 30px;
  font-weight: 600;
  line-height: 49px;
  text-transform: uppercase;
  color: var(--acz-black);
}

#services .acz-service-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

#services .acz-service {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  background-color: var(--acz-card);
  border-radius: var(--acz-radius);
  transition: background-color var(--acz-transition),
    transform var(--acz-transition),
    box-shadow var(--acz-transition);
}

#services .acz-service:hover {
  background-color: var(--acz-card-hover);
  transform: translateX(6px);
  box-shadow: 0 8px 18px rgba(21, 42, 55, 0.1);
}

#services .acz-service__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 49px;
  height: 49px;
  border-radius: 50%;
  background-color: var(--acz-navy-deep);
}

#services .acz-service__body {
  display: flex;
  flex-direction: column;
}

#services .acz-service__title {
  font-family: var(--acz-font-title);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: var(--acz-black);
}

#services .acz-service__text {
  font-size: 16px;
  line-height: 24px;
  color: var(--acz-black);
}

#services .acz-services__gallery {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  justify-content: center;
}

#services .acz-services__gallery img {
  display: block;
  width: 100%;
  border-radius: var(--acz-radius);
  object-fit: cover;
}

#services .acz-services__gallery img:first-child {
  height: 444px;
  object-position: 45% center;
}

#services .acz-services__gallery img:last-child {
  height: 476px;
}

/* ==========================================================================
   9. COACHING
   ========================================================================== */
#coaching {
  padding: 74px 0 85px;
  background-color: var(--acz-navy);
}

#coaching .acz-coaching__image {
  display: block;
  width: 100%;
  height: 585px;
  object-fit: cover;
  object-position: center bottom;
  border-radius: var(--acz-radius);
}

#coaching .acz-coaching__groups {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

#coaching .acz-coaching__group-title {
  margin: 0 0 6px;
  font-family: var(--acz-font-title);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: var(--acz-white);
}

/* ==========================================================================
   10. APPROACH
   ========================================================================== */
#approach {
  padding: 115px 0 114px;
  background-color: var(--acz-white);
}

#approach .acz-approach__list {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

#approach .acz-feature {
  padding: 19px 24px;
  background-color: var(--acz-card);
  border-radius: var(--acz-radius);
  transition: background-color var(--acz-transition),
    transform var(--acz-transition),
    box-shadow var(--acz-transition);
}

#approach .acz-feature:hover {
  background-color: var(--acz-card-hover);
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(21, 42, 55, 0.12);
}

#approach .acz-feature__title {
  margin: 0;
  font-family: var(--acz-font-title);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--acz-black);
}

#approach .acz-feature__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  color: var(--acz-black);
}

#approach .acz-approach__gallery {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

#approach .acz-approach__gallery img {
  display: block;
  width: 100%;
  height: 344px;
  object-fit: cover;
  border-radius: 10.2px;
}

/* First shot is pre-cropped to the Figma frame; the second is bottom-anchored. */
#approach .acz-approach__gallery img:last-child {
  object-position: center bottom;
}

/* ==========================================================================
   11. TEAM
   ========================================================================== */
#team {
  display: flex;
  align-items: center;
  min-height: 595px;
  padding: 80px 0;
  background-image: url("../img/team-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #2b2b2b;
}

#team .acz-team__content {
  max-width: 640px;
}

/* ==========================================================================
   12. TESTIMONIALS
   ========================================================================== */
#testimonials {
  background-color: var(--acz-white);
}

#testimonials .acz-testimonials__main {
  display: flex;
  align-items: center;
  min-height: 800px;
  padding: 96px 0;
}

#testimonials .acz-testimonials__inner {
  width: 100%;
  padding-inline: max(24px, calc((100vw - 1248px) / 2)) 32px;
}

#testimonials .acz-testimonials__title {
  margin: 8px 0 40px;
  font-family: var(--acz-font-title);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.4px;
  color: var(--acz-blue-deep);
}

/* Elfsight Google Reviews mount point. The widget injects its own markup, so
   only the slot is styled here; min-height reserves the Figma footprint and
   keeps the section from jumping when the embed finishes loading. */
#testimonials .acz-testimonials__widget {
  width: 100%;
  max-width: 740px;
  min-height: 290px;
  margin-inline: 0;
}

/* Elfsight ships its own root wrapper with `margin: 0 auto`, which floats the
   carousel in the middle of the column instead of lining it up with the
   eyebrow and the title. Pin the two outer wrappers flush-left; everything
   deeper (the rating header, the dots) keeps its own internal centering. */
#testimonials .acz-testimonials__widget > div,
#testimonials .acz-testimonials__widget > div > div {
  margin-left: 0 !important;
  margin-right: auto !important;
}

#testimonials .acz-testimonials__fallback {
  max-width: 740px;
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--acz-black);
}

#testimonials .acz-testimonials__fallback a {
  font-weight: 600;
  text-decoration: underline;
}

#testimonials .acz-testimonials__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 800px;
  padding: 144px 80px;
  background-color: var(--acz-navy);
}

#testimonials .acz-testimonials__brand img {
  width: 533px;
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   13. POLICY
   ========================================================================== */
#policy {
  padding: 84px 0 86px;
  background-color: var(--acz-grey-soft);
  background-image: url("../img/leaf-pattern.png");
  background-repeat: no-repeat;
  background-size: cover;
}

#policy .acz-policy__card {
  padding: 48px;
  background-color: var(--acz-navy);
  border-radius: var(--acz-radius);
}

#policy .acz-policy__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--acz-amber);
}

#policy .acz-policy__subtitle {
  margin: 24px 0 8px;
  font-family: var(--acz-font-title);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: var(--acz-amber);
}

#policy .acz-policy__note {
  margin-top: 24px;
  margin-bottom: 0;
}

#policy .acz-policy__note-label {
  font-weight: 600;
  color: var(--acz-amber);
}

/* ==========================================================================
   14. CONTACT / FOOTER
   ========================================================================== */
#contact {
  padding: 57px 0 0;
  background-color: var(--acz-white);
}

#contact .acz-contact__logo {
  width: 167px;
  height: auto;
  object-fit: contain;
}

#contact .acz-contact__title {
  margin: 0 0 18px;
  font-family: var(--acz-font-title);
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
  color: var(--acz-black);
}

#contact .acz-contact__text {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 21px;
  color: var(--acz-black);
}

#contact .acz-contact__text--strong {
  font-weight: 600;
}

#contact .acz-contact__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  padding-left: 48px;
  border-left: 1px solid var(--acz-rule);
}

#contact .acz-contact__aside-label {
  margin: 0;
  font-size: 14px;
  font-weight: 300;
  color: var(--acz-black);
}

#contact .acz-contact__list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  width: 100%;
  align-items: flex-end;
}

#contact .acz-contact__list li {
  display: flex;
  /* Top-aligned, so the icon stays on the first line when the address wraps
     onto a second one instead of floating between the two. */
  align-items: flex-start;
  gap: 9px;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

#contact .acz-contact__list li img {
  flex: 0 0 auto;
  width: 21px;
  /* Optical centring against the 24px line box. */
  margin-top: 2px;
}

#contact .acz-contact__list a {
  font-weight: 400;
}

#contact .acz-contact__social {
  display: flex;
  gap: 16px;
  margin: 8px 0 0;
}

#contact .acz-contact__social a {
  display: inline-flex;
  transition: transform var(--acz-transition), opacity var(--acz-transition);
}

#contact .acz-contact__social a:hover {
  transform: translateY(-3px);
  opacity: 0.75;
}

/* --- Bottom bar ---------------------------------------------------------- */
.acz-footerbar {
  margin-top: 58px;
  padding: 21px 0;
  background-color: var(--acz-navy);
}

.acz-footerbar__copy {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.15px;
  color: var(--acz-white);
}

/* ==========================================================================
   15. UTILITIES & ANIMATIONS
   ========================================================================== */
.acz-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.acz-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .acz-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.acz-backtotop {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1040;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background-color: var(--acz-amber);
  color: var(--acz-white);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--acz-transition), transform var(--acz-transition), visibility var(--acz-transition), background-color var(--acz-transition);
}

.acz-backtotop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.acz-backtotop:hover {
  background-color: var(--acz-amber-dark);
}

/* ==========================================================================
   16. RESPONSIVE
   ========================================================================== */

/* --- <= 1399px ----------------------------------------------------------- */
@media (max-width: 1399.98px) {
  #testimonials .acz-testimonials__inner {
    padding-inline: max(24px, calc((100vw - 1140px) / 2)) 24px;
  }
}

/* --- <= 1199px ----------------------------------------------------------- */
@media (max-width: 1199.98px) {
  :root {
    --acz-section-y: 72px;
  }

  html {
    scroll-padding-top: 86px;
  }

  /* The compact-on-scroll bar is a desktop idea: the base `.is-stuck` height
     is taller than the resting header down here, so without this the bar
     would grow as you scroll. Pin it to the resting height instead. */
  #header,
  #header.is-stuck {
    min-height: 86px;
  }

  #header .acz-header__logo {
    width: 210px;
  }

  #header .navbar-collapse {
    margin-top: 12px;
    padding: 18px 0 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }

  #header .acz-header__nav {
    gap: 4px;
    width: 100%;
  }

  #header .nav-link {
    padding: 8px 0;
    font-size: 18px;
  }

  #header .nav-link::after {
    display: none;
  }

  #hero {
    min-height: 780px;
    padding: 80px 0 64px;
  }

  #hero .acz-hero__title {
    font-size: 38px;
    line-height: 52px;
  }

  #booking .acz-booking__media {
    width: 40%;
  }

  #booking .acz-booking__title {
    font-size: 28px;
  }

  #services .acz-services__gallery img:first-child,
  #services .acz-services__gallery img:last-child {
    height: 340px;
  }

  #about .acz-about__portrait>img {
    height: 560px;
  }

  #coaching .acz-coaching__image {
    height: 520px;
  }

  #approach {
    padding: 80px 0;
  }

  #approach .acz-approach__gallery img {
    height: 300px;
  }

  #testimonials .acz-testimonials__main,
  #testimonials .acz-testimonials__brand {
    min-height: 640px;
  }

  #testimonials .acz-testimonials__brand {
    padding: 80px 48px;
  }
}

/* --- <= 991px (tablet) --------------------------------------------------- */
@media (max-width: 991.98px) {
  body {
    font-size: 17px;
  }

  .acz-title {
    font-size: 28px;
  }

  .acz-text {
    font-size: 17px;
  }

  .acz-section-head {
    margin-bottom: 28px;
  }

  #hero {
    min-height: 0;
    padding: 64px 0;
    background-position: center;
  }

  #hero .acz-hero__overlay {
    background: linear-gradient(180deg, rgba(21, 42, 55, 0.55) 0%, rgba(21, 42, 55, 0.88) 100%);
  }

  #hero .acz-hero__title {
    font-size: 32px;
    line-height: 44px;
  }

  #hero .acz-hero__rule {
    margin: 24px 0;
  }

  /* The section is a flex row on desktop so the copy centres against the
     bleeding photo. Once the media goes `static` below it stays a flex item,
     so the row is turned into a column rather than dropped -- that keeps
     `order` available to put the band last. `align-items` has to be reset off
     the base `center`, or the stacked children shrink to their content width. */
  #booking {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: 0 0 48px;
  }

  /* The flat-lay bleeds from the left on desktop; it becomes a full-width
     band above the copy once the columns stack. `darken` keeps the photo's
     white ground merged into the section background, and the band is lifted
     a layer so the leaf watermark can never wash across it. */
  #booking .acz-booking__media {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 220px;
    margin-bottom: 32px;
    background-position: center 55%;
  }

  #booking .acz-booking__leaf {
    width: 240px;
    top: auto;
    bottom: -40px;
    right: -70px;
  }

  #booking .acz-booking__title {
    font-size: 26px;
  }

  #about {
    padding: 64px 0;
  }

  #about .acz-about__portrait>img {
    height: 480px;
  }

  #services {
    padding: 64px 0;
  }

  #services .acz-services__category {
    line-height: 1.3;
    margin-bottom: 8px;
  }

  #services .acz-services__gallery {
    flex-direction: row;
    gap: 18px;
  }

  #services .acz-services__gallery img:first-child,
  #services .acz-services__gallery img:last-child {
    flex: 1 1 0;
    min-width: 0;
    height: 320px;
  }

  #coaching {
    padding: 64px 0;
  }

  #coaching .acz-coaching__image {
    height: 420px;
  }

  #approach {
    padding: 64px 0;
  }

  #approach .acz-approach__gallery {
    flex-direction: row;
    gap: 18px;
  }

  #approach .acz-approach__gallery img {
    flex: 1 1 0;
    min-width: 0;
    height: 260px;
  }

  #team {
    min-height: 0;
    padding: 56px 0;
    background-position: 22% center;
    position: relative;
  }

  #team::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(20, 20, 20, 0.35) 0%, rgba(20, 20, 20, 0.86) 45%);
  }

  #team .container {
    z-index: 1;
  }

  #team .acz-team__content {
    max-width: none;
  }

  #testimonials .acz-testimonials__main {
    min-height: 0;
    padding: 64px 0 48px;
  }

  #testimonials .acz-testimonials__inner {
    padding-inline: 24px;
  }

  #testimonials .acz-testimonials__title {
    font-size: 34px;
  }

  #testimonials .acz-testimonials__brand {
    min-height: 0;
    padding: 56px 32px;
  }

  #testimonials .acz-testimonials__brand img {
    width: 420px;
  }

  #policy {
    padding: 56px 0;
  }

  #policy .acz-policy__card {
    padding: 32px;
  }

  #contact {
    padding: 56px 0 0;
  }

  #contact .acz-contact__aside {
    align-items: flex-start;
    padding-left: 0;
    padding-top: 32px;
    border-left: 0;
    border-top: 1px solid var(--acz-rule);
  }

  #contact .acz-contact__list {
    align-items: flex-start;
  }

  .acz-footerbar {
    margin-top: 40px;
  }
}

/* --- <= 767px (small tablet) --------------------------------------------- */
@media (max-width: 767.98px) {
  #hero .acz-hero__actions .btn-acz-outline,
  #hero .acz-hero__actions .btn-acz-primary {
    width: 100%;
    min-width: 0;
  }

  .acz-title {
    font-size: 25px;
  }

  .acz-eyebrow {
    font-size: 16px;
  }

  .acz-text {
    font-size: 16px;
  }

  #hero {
    padding: 48px 0 56px;
  }

  #hero .acz-hero__title {
    font-size: 28px;
    line-height: 38px;
  }

  #hero .acz-hero__lead {
    font-size: 16px;
  }

  /* Phones only: the copy leads and the flat-lay closes the section, so the
     band bleeds to the bottom edge instead of the top. Tablets keep the photo
     up top, where there is still enough width for it to read as a banner. */
  #booking {
    padding: 48px 0 0;
  }

  #booking .acz-booking__media {
    order: 1;
    margin-top: 32px;
    margin-bottom: 0;
  }

  /* That corner now belongs to the photo, so the watermark moves up to
     decorate the copy instead. */
  #booking .acz-booking__leaf {
    top: -40px;
    bottom: auto;
  }

  #booking .acz-booking__title {
    font-size: 23px;
  }

  #booking .acz-booking__actions {
    gap: 24px;
  }

  #about .acz-about__portrait>img {
    height: 420px;
  }

  #about .acz-about__badges {
    gap: 24px;
    padding: 6px 16px;
    bottom: 24px;
  }

  #about .acz-about__badge--alliance {
    width: 76px;
    height: 44px;
  }

  #about .acz-about__badge--ritma {
    width: 102px;
    height: 36px;
  }

  #services .acz-service {
    padding: 12px;
  }

  #services .acz-service__icon {
    width: 44px;
    height: 44px;
  }

  #services .acz-services__gallery img:first-child,
  #services .acz-services__gallery img:last-child {
    height: 240px;
  }

  #coaching .acz-coaching__image {
    height: 340px;
  }

  #approach .acz-approach__gallery img {
    height: 200px;
  }

  #team {
    text-align: left;
  }

  #team::before {
    background: linear-gradient(180deg, rgba(20, 20, 20, 0.5) 0%, rgba(20, 20, 20, 0.9) 55%);
  }

  #testimonials .acz-testimonials__title {
    font-size: 30px;
  }

  #testimonials .acz-testimonials__brand img {
    width: 320px;
  }

  #policy .acz-policy__card {
    padding: 24px;
  }

  #policy .acz-policy__subtitle {
    font-size: 15px;
  }

  #contact .acz-contact__title {
    font-size: 22px;
    line-height: 32px;
  }
}

/* --- <= 575px (mobile) --------------------------------------------------- */
@media (max-width: 575.98px) {
  #hero .acz-hero__actions .btn-acz-outline,
  #hero .acz-hero__actions .btn-acz-primary {
    font-size: 16px;
  }

  html {
    scroll-padding-top: 78px;
  }

  body {
    font-size: 16px;
    line-height: 23px;
  }

  .acz-title {
    font-size: 22px;
    line-height: 1.32;
  }

  .btn-acz-primary,
  .btn-acz-outline,
  .btn-acz-dark {
    width: 100%;
    min-width: 0;
    font-size: 16px;
  }

  #header,
  #header.is-stuck {
    min-height: 78px;
  }

  #header .acz-header__logo {
    width: 175px;
  }

  #header .acz-header__phone-number {
    font-size: 20px;
    line-height: 28px;
  }

  #hero {
    padding: 40px 0 48px;
  }

  #hero .acz-hero__title {
    font-size: 24px;
    line-height: 34px;
  }

  #hero .acz-hero__actions {
    gap: 12px;
  }

  .acz-form-card {
    padding: 18px;
  }

  .acz-textarea {
    min-height: 110px;
  }

  #booking .acz-booking__media {
    height: 170px;
    margin-top: 24px;
  }

  #booking .acz-booking__title {
    font-size: 21px;
  }

  #booking .acz-booking__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }

  #booking .acz-booking__partner {
    align-self: center;
  }

  #about {
    padding: 48px 0;
  }

  #about .acz-about__portrait>img {
    height: 360px;
  }

  #about .acz-about__badges {
    gap: 18px;
    padding: 6px 12px;
    bottom: 18px;
  }

  #about .acz-about__badge--alliance {
    width: 64px;
    height: 37px;
  }

  #about .acz-about__badge--ritma {
    width: 86px;
    height: 30px;
  }

  #services {
    padding: 48px 0;
  }

  #services .acz-services__intro {
    text-align: center;
  }

  #services .acz-service {
    align-items: flex-start;
  }

  #services .acz-services__gallery {
    flex-direction: column;
  }

  #services .acz-services__gallery img:first-child,
  #services .acz-services__gallery img:last-child {
    height: 260px;
  }

  #coaching {
    padding: 48px 0;
  }

  #coaching .acz-coaching__image {
    height: 280px;
  }

  #approach {
    padding: 48px 0;
  }

  #approach .acz-approach__gallery {
    flex-direction: column;
  }

  #approach .acz-approach__gallery img {
    height: 220px;
  }

  #team {
    padding: 44px 0;
  }

  #testimonials .acz-testimonials__main {
    padding: 48px 0 36px;
  }

  #testimonials .acz-testimonials__title {
    font-size: 26px;
  }

  #testimonials .acz-testimonials__brand {
    padding: 44px 24px;
  }

  #testimonials .acz-testimonials__brand img {
    width: 250px;
  }

  #policy {
    padding: 44px 0;
  }

  #policy .acz-policy__card {
    padding: 20px 16px;
  }

  #contact {
    padding: 44px 0 0;
    text-align: center;
  }

  #contact .acz-contact__aside {
    align-items: center;
  }

  /* Centring each row individually leaves them ragged, because the two rows
     are different lengths. Share one left edge and centre the block instead. */
  #contact .acz-contact__list {
    align-items: flex-start;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    /* The section centres its text on mobile; these rows must not, or a
       wrapped address centres itself under its own label. */
    text-align: left;
  }

  /* No wrapping here: the icon belongs beside its label, and the text wraps
     inside the span on its own. */
  #contact .acz-contact__list li {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  #contact .acz-contact__social {
    justify-content: center;
  }

  .acz-footerbar .d-flex {
    justify-content: center !important;
  }

  .acz-backtotop {
    right: 16px;
    bottom: 16px;
    width: 42px;
    height: 42px;
  }
}


/* ==========================================================================
   17. MERCI PAGE (merci.html)
   Figma: Nb2zh89WnLfHTykT1qcgYa (node 1-1033)

   Kept in one self-contained block -- base rules plus their own breakpoints --
   rather than split across section 16, so the confirmation page can be lifted
   out or restyled without touching the landing page.
   ========================================================================== */
.acz-merci-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--acz-ink);
}

/* The photo carries a 52% black multiply in the design; it is baked in here as
   a gradient wash so the white copy keeps its contrast on every crop. */
.acz-merci {
  position: relative;
  flex: 1 0 auto;
  /* Both min-widths are load-bearing: as flex items these default to
     `min-width: auto`, which refuses to shrink below the panel's fixed 711px
     and drags the whole page wider than a phone viewport. */
  min-width: 0;
  display: flex;
  align-items: flex-start;
  padding: 197px 0 64px;
  background-color: var(--acz-ink);
  background-image: linear-gradient(rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.52)),
    url("../img/merci-bg.jpg");
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* The ribbon is the flattened top-right corner of the Figma frame: a flat
   #bfdedd at 16% through an S-curve mask. Width is set in vw against the
   1920px canvas so it keeps the design's proportions as the page scales. */
.acz-merci__accent {
  position: absolute;
  top: 0;
  right: 0;
  width: 29.583vw;
  height: auto;
  pointer-events: none;
}

/* The copy sits in the right half of the frame, clear of the model's face.
   Its right edge lines up with the 1248px content column. */
.acz-merci>.container {
  min-width: 0;
}

.acz-merci__panel {
  width: 711px;
  max-width: 100%;
  margin-left: auto;
  text-align: center;
}

.acz-merci__title {
  margin: 0 0 34px;
  font-family: var(--acz-font-title);
  font-size: 64px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.08px;
  text-transform: uppercase;
  color: var(--acz-white);
}

/* The Figma sets this at 32px in Gilroy Light. Poppins runs wider, and at 32px
   the designed second line lands 1px over the 711px column and drops "delais."
   onto a third line; 30px restores the two-line break with room to spare. */
.acz-merci__lead {
  margin: 0 0 34px;
  font-family: var(--acz-font-body);
  font-size: 30px;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.09px;
  color: var(--acz-white);
}

/* The amber square and the pill border are the same colour, so they read as
   one shape where they overlap -- no need to chase the sub-pixel offsets. */
.acz-merci__phone {
  display: inline-flex;
  align-items: center;
  gap: 30px;
  min-height: 69px;
  padding-right: 46px;
  border: 3px solid var(--acz-amber);
  border-radius: var(--acz-radius);
  color: var(--acz-white);
  text-decoration: none;
  transition: background-color var(--acz-transition),
    transform var(--acz-transition),
    box-shadow var(--acz-transition);
}

.acz-merci__phone:hover,
.acz-merci__phone:focus-visible {
  background-color: rgba(226, 155, 0, 0.16);
  color: var(--acz-white);
  transform: translateY(-2px);
  box-shadow: var(--acz-shadow-lift);
}

.acz-merci__phone-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 63px;
  height: 63px;
  margin: -3px 0 -3px -3px;
  border-radius: var(--acz-radius);
  background-color: var(--acz-amber);
}

.acz-merci__phone-icon img {
  width: 42px;
  height: 41px;
}

.acz-merci__phone-number {
  font-family: var(--acz-font-title);
  font-size: 36px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

/* The bar closes the page here, so it loses the landing page's top gap. */
.acz-footerbar--flush {
  flex-shrink: 0;
  margin-top: 0;
}

/* --- <= 1199px ----------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .acz-merci {
    padding-top: 150px;
  }

  .acz-merci__title {
    font-size: 54px;
  }

  .acz-merci__lead {
    font-size: 27px;
  }
}

/* --- <= 991px ------------------------------------------------------------ */
@media (max-width: 991.98px) {
  /* Below the desktop frame the copy no longer has to dodge the model, so it
     recentres and the decorative ribbon is dropped rather than squeezed. */
  .acz-merci {
    align-items: center;
    padding: 96px 0;
    /* Cover crops hard on a portrait viewport; bias left so the frame keeps
       the model's face rather than a slab of towel. */
    background-position: 30% center;
  }

  .acz-merci__accent {
    display: none;
  }

  .acz-merci__panel {
    width: 100%;
    margin-inline: auto;
  }

  .acz-merci__title {
    font-size: 46px;
    margin-bottom: 28px;
  }

  .acz-merci__lead {
    font-size: 23px;
    margin-bottom: 28px;
  }
}

/* --- <= 767px ------------------------------------------------------------ */
@media (max-width: 767.98px) {
  .acz-merci {
    padding: 72px 0;
  }

  .acz-merci__title {
    font-size: 38px;
  }

  .acz-merci__lead {
    font-size: 20px;
  }

  .acz-merci__phone {
    gap: 20px;
    padding-right: 28px;
  }

  .acz-merci__phone-number {
    font-size: 30px;
  }
}

/* --- <= 575px ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .acz-merci {
    padding: 56px 0;
  }

  .acz-merci__title {
    font-size: 32px;
    margin-bottom: 22px;
  }

  .acz-merci__lead {
    font-size: 18px;
    margin-bottom: 26px;
  }

  .acz-merci__phone {
    gap: 14px;
    min-height: 60px;
    padding-right: 20px;
  }

  .acz-merci__phone-icon {
    width: 54px;
    height: 54px;
  }

  .acz-merci__phone-icon img {
    width: 32px;
    height: 31px;
  }

  .acz-merci__phone-number {
    font-size: 24px;
  }
}


/* ==========================================================================
   18. LEGAL PAGE (politique-confidentialite.html)

   Self-contained like section 17: base rules plus their own breakpoints, so
   the policy page can be restyled without touching the landing page.
   ========================================================================== */
.acz-legal {
  padding: 72px 0 96px;
  background-color: var(--acz-white);
}

.acz-legal__head {
  max-width: 820px;
  margin-bottom: 48px;
}

.acz-legal__title {
  margin: 8px 0 12px;
  font-family: var(--acz-font-title);
  font-size: 46px;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.4px;
  color: var(--acz-navy);
}

.acz-legal__subtitle {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 500;
  color: var(--acz-navy-deep);
}

.acz-legal__meta {
  margin: 0;
  font-size: 16px;
  color: var(--acz-muted);
}

/* --- Table of contents --------------------------------------------------- */
.acz-legal__toc {
  max-width: 820px;
  margin-bottom: 56px;
  padding: 28px 32px;
  border-left: 4px solid var(--acz-amber);
  border-radius: var(--acz-radius);
  background-color: var(--acz-grey-bg);
}

.acz-legal__toc-title {
  margin: 0 0 16px;
  font-family: var(--acz-font-title);
  font-size: 20px;
  font-weight: 600;
  color: var(--acz-navy);
}

.acz-legal__toc-list {
  margin: 0;
  padding-left: 20px;
  columns: 2;
  column-gap: 40px;
}

.acz-legal__toc-list li {
  margin-bottom: 8px;
  break-inside: avoid;
  font-size: 16px;
  line-height: 22px;
  color: var(--acz-muted);
}

.acz-legal__toc-list a {
  color: var(--acz-navy-deep);
  text-decoration: none;
}

.acz-legal__toc-list a:hover,
.acz-legal__toc-list a:focus-visible {
  color: var(--acz-amber);
  text-decoration: underline;
}

/* --- Policy body --------------------------------------------------------- */
.acz-legal__body {
  max-width: 820px;
}

.acz-legal__section {
  margin-bottom: 44px;
  /* Clears the sticky header when a Sommaire link jumps to a section. */
  scroll-margin-top: 140px;
}

.acz-legal__section:last-child {
  margin-bottom: 0;
}

.acz-legal__section h2 {
  margin: 0 0 16px;
  font-family: var(--acz-font-title);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--acz-navy);
}

.acz-legal__num {
  color: var(--acz-amber);
}

.acz-legal__section p {
  margin: 0 0 14px;
  font-size: 17px;
  line-height: 28px;
  color: var(--acz-black);
}

.acz-legal__section ul {
  margin: 0 0 14px;
  padding-left: 22px;
}

.acz-legal__section li {
  margin-bottom: 8px;
  font-size: 17px;
  line-height: 28px;
  color: var(--acz-black);
}

.acz-legal__section p:last-child,
.acz-legal__section ul:last-child {
  margin-bottom: 0;
}

.acz-legal__section a {
  color: var(--acz-navy-deep);
  font-weight: 500;
  text-decoration: underline;
}

.acz-legal__section a:hover {
  color: var(--acz-amber);
}

.acz-legal__contact {
  list-style: none;
  padding-left: 0;
}

.acz-legal__contact span {
  display: inline-block;
  min-width: 96px;
  font-weight: 600;
  color: var(--acz-navy-deep);
}

/* Unresolved facts the client still has to supply. Deliberately loud: an
   incomplete legal page has to read as incomplete rather than as a claim. */
.acz-legal__todo {
  padding: 2px 8px;
  border-radius: 4px;
  background-color: #fff2cc;
  box-shadow: inset 0 0 0 1px var(--acz-amber);
  font-size: 15px;
  font-weight: 600;
  font-style: italic;
  color: #7a5200;
}

/* --- Footer bar link ----------------------------------------------------- */
.acz-footerbar__link {
  color: var(--acz-white);
  text-decoration: none;
}

.acz-footerbar__link:hover,
.acz-footerbar__link:focus-visible {
  color: var(--acz-amber);
  text-decoration: underline;
}

.acz-footerbar__sep {
  margin: 0 8px;
  opacity: 0.5;
}

/* --- <= 991px ------------------------------------------------------------ */
@media (max-width: 991.98px) {
  .acz-legal {
    padding: 56px 0 72px;
  }

  .acz-legal__title {
    font-size: 36px;
  }

  .acz-legal__toc-list {
    columns: 1;
  }
}

/* --- <= 767px ------------------------------------------------------------ */
@media (max-width: 767.98px) {
  .acz-legal {
    padding: 44px 0 56px;
  }

  .acz-legal__title {
    font-size: 30px;
  }

  .acz-legal__subtitle {
    font-size: 18px;
  }

  .acz-legal__toc {
    padding: 22px 20px;
  }

  .acz-legal__section h2 {
    font-size: 22px;
  }

  .acz-legal__section p,
  .acz-legal__section li {
    font-size: 16px;
    line-height: 26px;
  }

  .acz-legal__contact span {
    display: block;
    min-width: 0;
  }
}


/* ==========================================================================
   19. COOKIE CONSENT

   Banner and dialog are injected by script.js, so this section is the only
   place their look is defined. Both sit above the sticky header (z-index
   1030) and the back-to-top button.
   ========================================================================== */
.acz-cookie {
  position: fixed;
  z-index: 1060;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  padding: 20px 0;
  border-top: 3px solid var(--acz-amber);
  background-color: var(--acz-white);
  box-shadow: 0 -10px 30px rgba(1, 39, 54, 0.18);
}

.acz-cookie.is-open {
  display: block;
}

.acz-cookie__inner {
  display: flex;
  align-items: center;
  gap: 24px;
}

.acz-cookie__icon {
  flex-shrink: 0;
  font-size: 34px;
  line-height: 1;
}

.acz-cookie__copy {
  flex: 1 1 auto;
  min-width: 0;
}

.acz-cookie__title {
  margin: 0 0 4px;
  font-family: var(--acz-font-title);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--acz-navy);
}

.acz-cookie__text {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  color: var(--acz-black);
}

.acz-cookie__text a {
  display: inline-block;
  font-weight: 600;
  color: var(--acz-navy-deep);
  text-decoration: underline;
}

.acz-cookie__text a:hover {
  color: var(--acz-amber);
}

.acz-cookie__actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
}

/* Deliberately not .btn-acz-primary: that carries a 304px min-width meant for
   the page CTAs, which would blow the bar apart. */
.acz-cookie__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 4px 26px;
  border: 2px solid transparent;
  border-radius: var(--acz-radius-btn);
  font-family: var(--acz-font-title);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--acz-transition),
    border-color var(--acz-transition),
    color var(--acz-transition);
}

.acz-cookie__btn--accept {
  background-color: var(--acz-amber);
  border-color: var(--acz-amber);
  color: var(--acz-white);
}

.acz-cookie__btn--accept:hover {
  background-color: var(--acz-amber-dark);
  border-color: var(--acz-amber-dark);
}

.acz-cookie__btn--refuse {
  background-color: transparent;
  border-color: var(--acz-rule);
  color: var(--acz-navy);
}

.acz-cookie__btn--refuse:hover {
  border-color: var(--acz-navy);
  background-color: var(--acz-grey-bg);
}

.acz-cookie__link {
  padding: 4px 2px;
  border: 0;
  background: none;
  font-family: var(--acz-font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--acz-muted);
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
}

.acz-cookie__link:hover {
  color: var(--acz-navy);
}

/* Shown in the reviews slot while third-party content is declined. */
.acz-cookie__inline-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 12px;
  padding: 4px 22px;
  border: 2px solid var(--acz-amber);
  border-radius: var(--acz-radius-btn);
  background-color: transparent;
  font-family: var(--acz-font-title);
  font-size: 15px;
  font-weight: 600;
  color: var(--acz-navy);
  cursor: pointer;
  transition: background-color var(--acz-transition), color var(--acz-transition);
}

.acz-cookie__inline-btn:hover {
  background-color: var(--acz-amber);
  color: var(--acz-white);
}

/* --- Preferences dialog -------------------------------------------------- */
.acz-cookie-prefs {
  width: min(580px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(1, 39, 54, 0.35);
  color: var(--acz-black);
}

.acz-cookie-prefs::backdrop {
  background-color: rgba(1, 39, 54, 0.55);
}

.acz-cookie-prefs__panel {
  padding: 32px;
}

.acz-cookie-prefs__title {
  margin: 0 0 6px;
  font-family: var(--acz-font-title);
  font-size: 23px;
  font-weight: 600;
  color: var(--acz-navy);
}

.acz-cookie-prefs__intro {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 22px;
  color: var(--acz-muted);
}

.acz-cookie-prefs__list {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

/* Each category is its own card rather than a table row: it keeps the toggle
   tied to its own description when the text wraps on a phone. */
.acz-cookie-prefs__item {
  margin-bottom: 12px;
  padding: 16px 18px;
  border: 1px solid var(--acz-rule);
  border-radius: 12px;
  background-color: var(--acz-grey-bg);
}

.acz-cookie-prefs__item:last-child {
  margin-bottom: 0;
}

.acz-cookie-prefs__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.acz-cookie-prefs__name {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 600;
  color: var(--acz-navy);
}

.acz-cookie-prefs__ico {
  font-size: 17px;
  line-height: 1;
}

.acz-cookie-prefs__desc {
  display: block;
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--acz-muted);
  cursor: pointer;
}

.acz-cookie-prefs__note {
  font-style: italic;
  color: var(--acz-amber-dark);
}

/* --- Toggle -------------------------------------------------------------- */
.acz-cookie-prefs__switch {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 28px;
}

.acz-cookie-prefs__switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.acz-cookie-prefs__switch input:disabled {
  cursor: default;
}

.acz-cookie-prefs__track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background-color: #cfd6da;
  transition: background-color var(--acz-transition);
  pointer-events: none;
}

.acz-cookie-prefs__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--acz-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform var(--acz-transition);
}

.acz-cookie-prefs__switch input:checked+.acz-cookie-prefs__track {
  background-color: var(--acz-amber);
}

.acz-cookie-prefs__switch input:checked+.acz-cookie-prefs__track::after {
  transform: translateX(20px);
}

/* Essentials read as on and clearly not up for negotiation. */
.acz-cookie-prefs__switch input:disabled+.acz-cookie-prefs__track {
  opacity: 0.55;
}

.acz-cookie-prefs__switch input:focus-visible+.acz-cookie-prefs__track {
  outline: 3px solid var(--acz-amber);
  outline-offset: 3px;
}

/* --- Dialog actions ------------------------------------------------------ */
.acz-cookie-prefs__actions {
  display: flex;
  gap: 12px;
}

.acz-cookie-prefs__actions .acz-cookie__btn {
  flex: 1 1 0;
}

.acz-cookie-prefs__minor {
  margin: 16px 0 0;
  text-align: center;
}

.acz-cookie-prefs__minor-btn {
  padding: 4px 2px;
  border: 0;
  background: none;
  font-family: var(--acz-font-body);
  font-size: 14px;
  color: var(--acz-muted);
  text-decoration: underline;
  cursor: pointer;
}

.acz-cookie-prefs__minor-btn:hover {
  color: var(--acz-navy);
}

.acz-cookie-prefs__minor-sep {
  margin: 0 10px;
  color: var(--acz-rule);
}

/* Footer bar + policy body triggers that reopen the dialog. */
.acz-footerbar__btn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

.acz-legal__inline-btn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 500;
  color: var(--acz-navy-deep);
  text-decoration: underline;
  cursor: pointer;
}

.acz-legal__inline-btn:hover {
  color: var(--acz-amber);
}

/* --- <= 991px ------------------------------------------------------------ */
@media (max-width: 991.98px) {
  .acz-cookie__inner {
    flex-wrap: wrap;
    gap: 16px;
  }

  .acz-cookie__actions {
    flex: 1 1 100%;
  }
}

/* --- <= 575px ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .acz-cookie {
    padding: 16px 0;
    /* A tall banner on a short phone must not swallow the page. */
    max-height: 70vh;
    overflow-y: auto;
  }

  .acz-cookie__icon {
    font-size: 26px;
  }

  .acz-cookie__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .acz-cookie__link {
    padding: 8px 2px;
  }

  .acz-cookie-prefs__panel {
    padding: 24px 20px;
  }

  .acz-cookie-prefs__item {
    padding: 14px;
  }

  .acz-cookie-prefs__actions {
    flex-direction: column;
  }
}