@charset "UTF-8";
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
img,
svg,
video {
  max-width: 100%;
  height: auto;
}

svg {
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.at-skip-link:focus {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1000;
  width: auto;
  height: auto;
  padding: var(--wp--preset--spacing--10, 0.5rem) var(--wp--preset--spacing--20, 1rem);
  clip: auto;
  background: var(--wp--preset--color--paper, #fff);
  color: var(--wp--preset--color--brand-navy, #0e4b5a);
  box-shadow: 0 0 0 2px var(--wp--preset--color--brand-cyan, #12a6c6);
}

:focus-visible {
  outline: 2px solid var(--wp--preset--color--brand-cyan, #12a6c6);
  outline-offset: 2px;
}

:root {
  --at-gutter: 20px;
  --at-content-max: var(--wp--style--global--wide-size, 1200px);
  --at-shadow-hover: 0 0 15px rgba(0, 0, 0, 0.15);
  --at-surface-blue-50: #eff5fc;
  --at-surface-blue-100: #e6f4fb;
  --at-prefooter-footer-overlap: 128px;
  --at-primary-900: #12678c;
  --at-primary-800: #00b4d8;
  --at-primary-600: #2c7fa5;
  --at-accent-orange-500: #f4a261;
  --at-shadow-card-hover: 0 0 25px rgba(0, 0, 0, 0.15);
  --at-border-subtle: #dde3ea;
  --at-gray-50: #f7f9fb;
  --at-gray-600: #6c7a89;
  --at-gray-900: #1a2332;
  --at-preheader-h: 32px;
  --at-preheader-pro-w: 410px;
  --at-hero-col-text: 700px;
  --at-hero-col-media: 44vw;
  --at-hero-grid-gap: 56px;
  --at-hero-axis-left: max(
  	calc(1.5rem + var(--at-hero-grid-gap)),
  	calc(100vw - var(--at-hero-col-media) - var(--at-hero-grid-gap) - var(--at-hero-col-text))
  );
  --at-content-edge: max(
  	var(--at-gutter),
  	calc((100vw - var(--wp--style--global--wide-size, 1200px)) / 2 + var(--at-gutter))
  );
  --at-axis-left: min(var(--at-hero-axis-left), var(--at-content-edge));
}

.at-container {
  width: 100%;
  max-width: var(--wp--style--global--wide-size, 1200px);
  margin-inline: auto;
  padding-inline: var(--at-gutter);
}

.at-main {
  padding-block: var(--wp--preset--spacing--40, 2.5rem);
  container-type: inline-size;
}

.at-preheader {
  display: none;
  background: var(--at-primary-600, #2c7fa5);
}

.at-preheader__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--at-preheader-pro-w, 410px);
  align-items: stretch;
  min-height: var(--at-preheader-h, 32px);
}

.at-preheader__msg {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  padding-left: var(--at-axis-left);
  padding-right: var(--at-gutter);
  color: #fff;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.at-preheader__msg p {
  margin: 0;
  text-align: left;
}

.at-preheader__msg p:first-child::before {
  content: "→ ";
}

.at-preheader__msg a {
  color: inherit;
  text-decoration: underline;
  margin-inline: 0.25em;
}

.at-preheader__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-inline: 20px;
  background: var(--at-primary-800, #00b4d8);
  border-left: 1px solid #fff;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.at-preheader__link::after {
  content: "→";
}

@media (min-width: 64rem) {
  .at-preheader {
    display: block;
  }
}
.at-site-header {
  position: relative;
  z-index: 20;
  background: #fff;
  padding-block: 8px;
  border-bottom: 1px solid var(--wp--preset--color--line, #dce6ea);
}

.at-footer-surface {
  background: var(--at-page-end-surface, #fff);
}

.at-site-footer {
  background: #08364a;
  color: #fff;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  padding: 48px 20px 24px;
}

.at-has-prefooter .at-site-footer {
  padding-top: calc(var(--at-prefooter-footer-overlap) + 48px);
}

.at-site-header__inner,
.at-site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--30, 1.5rem);
}

@media (min-width: 64rem) {
  .at-site-header__inner {
    max-width: none;
    margin-inline: 0;
    padding-left: var(--at-axis-left);
    padding-right: var(--at-axis-left);
  }
}
.at-site-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: 0 0 auto;
}

.at-site-logo {
  display: block;
  height: 72px;
  width: auto;
}

.at-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.at-nav__link {
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  color: var(--at-primary-900, #12678c);
}

.at-nav__link:hover {
  color: var(--at-primary-800, #00b4d8);
}

.at-nav__link--has-panel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.at-site-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.at-site-header__cta {
  white-space: nowrap;
}

@media (max-width: 63.999rem) {
  .at-nav,
  .at-site-header__actions {
    display: none;
  }
}
.at-nav__item {
  position: static;
}

.at-nav__item--dropdown {
  position: relative;
}

.at-nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: inherit;
  cursor: pointer;
  color: var(--at-primary-900, #12678c);
}

.at-nav__toggle:hover {
  color: var(--at-primary-800, #00b4d8);
}

.at-nav__split {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.at-nav__toggle--chevron {
  padding: 4px;
}

.at-nav__caret {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}

.at-nav__toggle[aria-expanded=true] .at-nav__caret,
.at-nav__link--has-panel[aria-expanded=true] .at-nav__caret {
  transform: translateY(1px) rotate(-135deg);
}

.at-dropdown[hidden],
.at-megamenu[hidden] {
  display: none;
}

.at-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  z-index: 30;
  min-width: 240px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--at-gray-200, #dde3ea);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.at-dropdown__link {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--at-primary-900, #12678c);
}

.at-dropdown__link:hover {
  background: var(--at-surface-blue-50, #eff5fc);
}

.at-megamenu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: min(var(--at-content-max, 1200px), 100% - 2 * var(--at-gutter, 24px));
  z-index: 30;
  background: #fff;
  border-radius: 0 0 16px 16px;
  overflow: hidden;
  box-shadow: 0 40px 40px rgba(0, 0, 0, 0.3);
}

.at-megamenu__inner {
  padding: 40px 48px;
}

.at-megamenu__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.at-megamenu__rub {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--at-gray-200, #dde3ea);
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  color: var(--at-primary-900, #12678c);
}

.at-megamenu__rub-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--at-surface-blue-100, #e6f4fb);
  color: var(--at-primary-900, #12678c);
}

.at-megamenu__rub-icon svg,
.at-megamenu__rub-icon-img {
  width: 22px;
  height: 22px;
}

.at-megamenu__list {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.at-megamenu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 32px;
  padding: 6px 8px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--at-primary-900, #12678c);
}

.at-megamenu__link:hover {
  background: var(--at-surface-blue-50, #eff5fc);
}

.at-nav__arrow {
  color: var(--at-primary-800, #00b4d8);
}

.at-megamenu__conseil {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px 40px;
  background: var(--at-surface-blue-100, #e6f4fb);
  border-radius: 16px;
  text-align: center;
}

.at-megamenu__conseil-title {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--at-primary-900, #12678c);
}

.at-megamenu__btob {
  background: var(--at-primary-900, #12678c);
  color: #fff;
}

.at-megamenu__btob-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  padding: 14px 48px;
}

.at-megamenu__btob-text {
  flex: 1 1 auto;
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  line-height: 20px;
}

.at-megamenu__btob-links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.at-megamenu__btob-link {
  color: var(--at-primary-800, #00b4d8);
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
}

.at-megamenu__btob-link:hover {
  color: #fff;
}

body.home .at-nav__toggle {
  color: #fff;
}

body.home .at-nav__toggle:hover {
  color: var(--at-primary-800, #00b4d8);
}

.at-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--at-primary-900, #12678c);
}

.at-burger__bar {
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

body.home .at-burger {
  color: #fff;
}

.at-mobile-nav[hidden] {
  display: none;
}

.at-mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.admin-bar .at-mobile-nav {
  top: 46px;
}

@media (min-width: 783px) {
  .admin-bar .at-mobile-nav {
    top: 32px;
  }
}
.at-mnav__overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 54, 74, 0.5);
  border: 0;
}

.at-mnav__dialog {
  --at-mnav-x: 20px;
  position: absolute;
  inset: 0 0 0 auto;
  width: min(380px, 88vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: -12px 0 32px rgba(0, 0, 0, 0.18);
}

.at-mnav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px var(--at-mnav-x, 20px);
  border-bottom: 1px solid var(--at-gray-200, #dde3ea);
}

.at-mnav__brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
}

.at-mnav__logo {
  display: block;
  height: 72px;
  width: auto;
}

.at-mnav__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-inline: var(--at-mnav-x, 20px);
}

.at-mnav__bar .at-mnav__back {
  padding-block: 8px;
}

.at-mnav__title {
  flex: 1 1 auto;
  text-align: center;
  padding-block: 8px;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--at-primary-900, #12678c);
}

.at-mnav__back,
.at-mnav__close {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  color: var(--at-primary-900, #12678c);
}

.at-mnav__back[hidden] {
  display: none;
}

.at-mnav__close {
  font-size: 28px;
  line-height: 1;
}

.at-mnav__viewport {
  position: relative;
  flex: 1 1 auto;
  overflow-y: auto;
}

.at-mnav__panel[hidden] {
  display: none;
}

.at-mnav__panel {
  margin: 0;
  padding: 8px 0;
  list-style: none;
}

.at-mnav__drill,
.at-mnav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px var(--at-mnav-x, 20px);
  background: none;
  border: 0;
  text-align: left;
  text-decoration: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  color: var(--at-primary-900, #12678c);
  cursor: pointer;
}

.at-mnav__drill:hover,
.at-mnav__link:hover {
  background: var(--at-surface-blue-50, #eff5fc);
}

.at-mnav__chev {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

.at-mnav__row {
  display: flex;
  align-items: stretch;
}

.at-mnav__link--split {
  flex: 1 1 auto;
}

.at-mnav__drill--split {
  flex: 0 0 auto;
  width: auto;
  min-width: 56px;
  justify-content: flex-end;
}

.at-mnav__foot {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px var(--at-mnav-x, 20px);
  border-top: 1px solid var(--at-gray-200, #dde3ea);
}

.at-mnav__cta {
  justify-content: center;
}

body.at-mnav-open {
  overflow: hidden;
}

body.home .at-site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 20;
  background: transparent;
  border-bottom: 0;
}

body.home .at-nav__link {
  color: #fff;
}

body.home .at-nav__link:hover {
  color: var(--at-primary-800, #00b4d8);
}

body.home .at-hero-home {
  padding-top: 100px;
}

@media (min-width: 64rem) {
  body.home .at-hero-home {
    padding-top: 120px;
  }
  .at-burger {
    display: none;
  }
  body.home .at-site-header {
    top: var(--at-preheader-h, 32px);
  }
}
body.admin-bar.home .at-site-header {
  top: 46px;
}

@media (min-width: 783px) {
  body.admin-bar.home .at-site-header {
    top: 32px;
  }
}
@media (min-width: 64rem) {
  body.admin-bar.home .at-site-header {
    top: calc(var(--at-preheader-h, 32px) + 32px);
  }
}
.at-article__content > *,
.at-page__content > *,
.wp-block-media-text .wp-block-media-text__content > * {
  margin-block: 0;
}

.at-article__content > * + *,
.at-page__content > * + * {
  margin-block-start: 24px;
}

.wp-block-media-text .wp-block-media-text__content > * + * {
  margin-block-start: 16px;
}

.at-produit__content > :is(h2, h3, h4, p, ul, ol, figure),
.at-destination__content > :is(h2, h3, h4, p, ul, ol, figure) {
  margin-block: 0;
  padding-block: 0;
}

.at-produit__content > :is(h2, h3, h4, p, ul, ol, figure) + :is(h2, h3, h4, p, ul, ol, figure),
.at-destination__content > :is(h2, h3, h4, p, ul, ol, figure) + :is(h2, h3, h4, p, ul, ol, figure) {
  margin-block-start: 24px;
}

.at-produit__content > :not(h2, h3, h4, p, ul, ol, figure) + :is(h2, h3, h4, p, ul, ol, figure),
.at-destination__content > :not(h2, h3, h4, p, ul, ol, figure) + :is(h2, h3, h4, p, ul, ol, figure) {
  margin-block-start: 32px;
}

.at-article__content > h2,
.at-page__content > h2,
.at-produit__content > h2,
.at-destination__content > h2,
.wp-block-media-text .wp-block-media-text__content > h2 {
  font-size: 36px;
  line-height: 44px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--at-primary-900);
}

.at-article__content > h3,
.at-page__content > h3,
.at-produit__content > h3,
.at-destination__content > h3,
.wp-block-media-text .wp-block-media-text__content > h3 {
  font-size: 28px;
  line-height: 36px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--at-primary-900); /* display/h3 = navy #12678C */
}

.at-article__content > h4,
.at-page__content > h4,
.at-produit__content > h4,
.at-destination__content > h4,
.wp-block-media-text .wp-block-media-text__content > h4 {
  font-size: 18px;
  line-height: 22px;
  font-weight: 500;
  color: var(--at-primary-600);
}

.at-article__content > p,
.at-article__content > ul li,
.at-article__content > ol li,
.at-page__content > p,
.at-page__content > ul li,
.at-page__content > ol li,
.at-produit__content > p,
.at-produit__content > ul li,
.at-produit__content > ol li,
.at-destination__content > p,
.at-destination__content > ul li,
.at-destination__content > ol li,
.wp-block-media-text .wp-block-media-text__content > p,
.wp-block-media-text .wp-block-media-text__content > ul li,
.wp-block-media-text .wp-block-media-text__content > ol li {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--at-gray-900);
}

.at-article__content > ul,
.at-article__content > ol,
.at-page__content > ul,
.at-page__content > ol,
.at-produit__content > ul,
.at-produit__content > ol,
.at-destination__content > ul,
.at-destination__content > ol,
.wp-block-media-text .wp-block-media-text__content > ul,
.wp-block-media-text .wp-block-media-text__content > ol {
  padding-inline-start: 1.5em;
}

.at-article__content > ul li + li,
.at-article__content > ol li + li,
.at-page__content > ul li + li,
.at-page__content > ol li + li,
.at-produit__content > ul li + li,
.at-produit__content > ol li + li,
.at-destination__content > ul li + li,
.at-destination__content > ol li + li,
.wp-block-media-text .wp-block-media-text__content > ul li + li,
.wp-block-media-text .wp-block-media-text__content > ol li + li {
  margin-block-start: 8px;
}

.at-article__content > figure img,
.at-page__content > figure img,
.at-produit__content > figure img,
.at-destination__content > figure img,
.wp-block-media-text .wp-block-media-text__content > figure img {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
}

.at-article__content > p a,
.at-article__content > ul li a,
.at-article__content > ol li a,
.at-page__content > p a,
.at-page__content > ul li a,
.at-page__content > ol li a,
.wp-block-media-text .wp-block-media-text__content > p a,
.wp-block-media-text .wp-block-media-text__content > ul li a,
.wp-block-media-text .wp-block-media-text__content > ol li a {
  color: var(--at-primary-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.at-article {
  max-width: none;
}

.at-article__header {
  max-width: var(--wp--style--global--content-size, 760px);
  margin-block-end: var(--wp--preset--spacing--30, 1.5rem);
}

.at-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.at-tag {
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--at-accent-orange-500);
  border: 1px solid var(--at-accent-orange-500);
  border-radius: 999px;
  padding: 4px 10px;
}

.at-hero-article {
  position: relative;
  min-height: 375px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--at-gutter);
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  overflow: hidden;
  text-align: center;
  color: #fff;
}

.at-hero-article__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.at-hero-article::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--at-primary-900) 0%, rgba(3, 42, 94, 0) 116.85%);
  z-index: 1;
}

.at-hero-article__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 844px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.at-hero-article__date {
  margin: 0;
  font-size: 10px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #fff;
  padding-bottom: 4px;
  border-bottom: 1px dashed #fff;
}

.at-hero-article__title {
  margin: 0;
  font-size: 32px;
  line-height: 40px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
}

.at-hero-article__tags {
  justify-content: center;
}

@media (min-width: 64rem) {
  .at-hero-article {
    min-height: 540px;
    padding-inline: 80px;
  }
  .at-hero-article__title {
    font-size: 48px;
    line-height: 56px;
  }
}
.single .at-article {
  padding-block: 2.5rem;
}

.at-article__aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: var(--wp--preset--spacing--40, 2.5rem);
}

@media (min-width: 64rem) {
  .at-article__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 302px;
    column-gap: var(--wp--preset--spacing--40, 2.5rem);
    align-items: start;
  }
  .at-article__content {
    grid-column: 1;
    grid-row: 1;
    max-width: var(--wp--style--global--content-size, 760px);
  }
  .at-article__aside {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 0;
    position: sticky;
    top: var(--wp--preset--spacing--40, 2.5rem);
  }
}
/* ============================================================================
   Cartes de sidebar Article (habillage Figma). Deux familles :
   - .at-partez-assure : carte CTA sombre (recommandation produit).
   - .at-sidenav : carte-liste claire RÉUTILISABLE (navigation de sidebar). .at-toc en est l'usage
     « sommaire » ; une future « Pages utiles » (menu WP) réutilisera .at-sidenav sans duplication.
   En-tête commun .at-sidehead (eyebrow caps + filet cyan) ; couleur du label héritée de la carte.
   ============================================================================ */
.at-sidehead {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.at-sidehead__label {
  margin: 0;
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: inherit;
}

.at-sidehead__line {
  width: 40px;
  height: 2px;
  background: var(--at-primary-800);
}

.at-partez-assure,
.at-contact-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 24px;
  border-radius: 16px;
  background: var(--at-primary-900);
  color: #fff;
}

.at-partez-assure__body,
.at-contact-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.at-partez-assure__title {
  margin: 0;
  font-size: 18px;
  line-height: 26px;
  font-weight: 500;
  color: #fff;
}

.at-partez-assure__text {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--at-border-subtle);
}

.at-partez-assure__cta,
.at-contact-card__cta {
  align-self: flex-start;
}

.at-sidenav {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-radius: 16px;
  background: var(--at-surface-blue-50);
  color: var(--at-primary-900);
}

.at-sidenav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.at-sidenav__item + .at-sidenav__item {
  border-top: 1px solid var(--at-border-subtle);
}

.at-sidenav__link {
  display: block;
  padding-block: 16px;
  font-size: 14px;
  line-height: 20px;
  color: var(--at-primary-900);
  text-decoration: none;
}

.at-sidenav__item:first-child .at-sidenav__link {
  padding-top: 0;
}

.at-sidenav__item:last-child .at-sidenav__link {
  padding-bottom: 0;
}

.at-sidenav__link:hover {
  text-decoration: underline;
}

.at-toc .at-sidenav__link {
  position: relative;
  padding-block: 12px;
  padding-left: 32px;
  padding-right: 8px;
}

.at-toc .at-sidenav__link::before {
  content: "→";
  position: absolute;
  left: 8px;
  color: inherit;
}

.at-toc .at-sidenav__link:hover,
.at-pages .at-sidenav__link:hover {
  background: rgba(18, 103, 140, 0.05);
  border-radius: 8px;
  text-decoration: none;
}

.at-pages .at-sidenav__link {
  padding-block: 12px;
  padding-inline: 8px;
}

.at-toc .at-sidenav__link.is-active {
  background: rgba(18, 103, 140, 0.1);
  border-radius: 8px;
  font-weight: 600;
}

.at-toc .at-sidenav__item:first-child .at-sidenav__link,
.at-pages .at-sidenav__item:first-child .at-sidenav__link {
  padding-top: 12px;
}

.at-toc .at-sidenav__item:last-child .at-sidenav__link,
.at-pages .at-sidenav__item:last-child .at-sidenav__link {
  padding-bottom: 12px;
}

.at-article__content > h2,
.at-article__content > h3 {
  scroll-margin-top: 1.5rem;
}

.at-actu-card {
  display: grid;
  grid-template-columns: 40% 1fr;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(18, 65, 90, 0.07);
}

.at-actu-card__media {
  display: block;
  position: relative;
}

.at-actu-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.at-actu-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 24px;
  justify-content: center;
}

.at-actu-card__date {
  font-size: 12px;
  line-height: 16px;
  color: #12678c;
  padding-bottom: 12px;
  border-bottom: 1px dotted #9fc0d4;
}

.at-actu-card__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.at-actu-card__cat {
  align-self: flex-start;
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #eb7405;
  border: 1px solid #eb7405;
  border-radius: 999px;
  padding: 4px 12px;
}

.at-actu-card__title {
  margin: 0;
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  color: #12678c;
}

.at-actu-card__title a {
  color: inherit;
  text-decoration: none;
}

.at-actu-card__title a:hover {
  text-decoration: underline;
}

.at-actu-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* ============================================================================
   Actu-Card STANDARD — calibration Figma (relevé Dev Mode). Porte TOUT le recalage sur le
   modifier `--standard` (override du socle par spécificité) → le socle .at-actu-card et la
   variante --featured restent intacts jusqu'à la passe featured. Carte entièrement cliquable
   (lien titre étiré, convention « cartes cliquables »). Tokens de marque relevés Figma.
   ============================================================================ */
.at-actu-card--standard {
  position: relative;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
  box-shadow: none;
  transition: box-shadow 0.3s ease-out;
}

.at-actu-card--on-white {
  border: 1px solid var(--at-border-subtle);
}

.at-actu-card--standard .at-actu-card__body {
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 16px 8px 0;
}

.at-actu-card--standard .at-actu-card__date {
  font-size: 10px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--at-primary-900);
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--at-primary-600);
}

.at-actu-card--standard .at-actu-card__cats {
  margin-top: 8px;
}

.at-actu-card--standard .at-actu-card__cat {
  color: var(--at-accent-orange-500);
  border-color: var(--at-accent-orange-500);
  padding: 4px 10px;
  transition: background-color 0.3s ease-out, color 0.3s ease-out;
}

.at-actu-card--standard .at-actu-card__title {
  font-size: 14px;
  line-height: 20px;
  color: var(--at-primary-600);
}

.at-actu-card--standard .at-actu-card__title a:hover {
  text-decoration: none;
}

.at-actu-card--standard .at-actu-card__title a:focus-visible {
  outline: none;
}

.at-actu-card--standard:has(a:focus-visible) {
  outline: 3px solid var(--at-primary-600);
  outline-offset: 2px;
  box-shadow: var(--at-shadow-card-hover);
}

.at-actu-card--standard:has(a:focus-visible) .at-actu-card__cat {
  background: var(--at-accent-orange-500);
  color: #fff;
}

@media (hover: hover) {
  .at-actu-card--standard:hover {
    box-shadow: var(--at-shadow-card-hover);
  }
  .at-actu-card--standard:hover .at-actu-card__cat {
    background: var(--at-accent-orange-500);
    color: #fff;
  }
}
@media (max-width: 39.999rem) {
  .at-actu-card--standard {
    grid-template-columns: 40% 1fr;
  }
}
.at-actu-card--featured {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--at-primary-900);
}

@media (max-width: 63.999rem) {
  .at-actu-card--featured {
    min-height: 360px;
  }
}
.at-actu-card--featured .at-actu-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.at-actu-card--featured::before,
.at-actu-card--featured::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.at-actu-card--featured::before {
  background: linear-gradient(180deg, rgba(18, 103, 140, 0) 41.37%, var(--at-primary-900) 100%);
}

.at-actu-card--featured::after {
  background: linear-gradient(180deg, rgba(18, 103, 140, 0) 8.26%, var(--at-gray-900) 100%);
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.at-actu-card--featured .at-actu-card__body {
  position: absolute;
  inset: 0;
  z-index: 2;
  justify-content: flex-end;
  padding: 48px;
  gap: 12px;
  color: #fff;
}

.at-actu-card--featured .at-actu-card__date {
  font-size: 10px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #fff;
  padding-bottom: 4px;
  border-bottom: 1px dashed #fff;
}

.at-actu-card--featured .at-actu-card__cat {
  color: var(--at-accent-orange-500);
  border-color: var(--at-accent-orange-500);
  padding: 4px 10px;
  transition: background-color 0.3s ease-out, color 0.3s ease-out;
}

.at-actu-card--featured .at-actu-card__title,
.at-actu-card--featured .at-actu-card__title a {
  color: #fff;
  font-size: 22px;
  line-height: 30px;
  font-weight: 700;
}

.at-actu-card--featured .at-actu-card__title a:hover {
  text-decoration: none;
}

.at-actu-card--featured:has(a:focus-visible)::after {
  opacity: 1;
}

.at-actu-card--featured:has(a:focus-visible) .at-actu-card__cat {
  background: var(--at-accent-orange-500);
  color: #fff;
}

@media (hover: hover) {
  .at-actu-card--featured:hover::after {
    opacity: 1;
  }
  .at-actu-card--featured:hover .at-actu-card__cat {
    background: var(--at-accent-orange-500);
    color: #fff;
  }
}
.at-actu-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 40rem) {
  .at-actu-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 64rem) {
  .at-actu-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.at-actus .at-section-header {
  margin-bottom: 48px;
}

.at-actus__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 64rem) {
  .at-actus__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: stretch;
  }
}
.at-actus__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.at-actus__foot {
  margin-top: 48px;
  text-align: center;
}

.at-actus-placeholder {
  margin: 0;
  padding: 24px;
  text-align: center;
  color: #6c7a89;
  background: #eff5fc;
  border-radius: 12px;
}

.at-prix {
  margin: 0 0 0.5rem;
  color: var(--wp--preset--color--brand-navy, #0b2a4a);
}

.at-prix__prefix {
  font-size: var(--wp--preset--font-size--sm, 0.875rem);
  color: var(--wp--preset--color--muted, #5b6b70);
}

.at-prix__valeur {
  font-weight: 800;
  font-size: var(--wp--preset--font-size--lg, 1.25rem);
}

.at-prix--hero .at-prix__valeur {
  font-size: var(--wp--preset--font-size--xl, 1.5rem);
}

.at-prix__montant {
  display: inline-flex;
  align-items: flex-start;
  gap: 4px;
}

.at-prix__suffixe {
  font-size: var(--wp--preset--font-size--sm, 0.875rem);
  color: var(--wp--preset--color--muted, #5b6b70);
}

.at-hero-produit {
  width: 100%;
  background: #eff5fc;
  margin-block-end: 0;
}

.at-hero-produit__inner {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 64rem) {
  .at-hero-produit {
    position: relative;
    margin-block-end: 0;
  }
  .at-hero-produit__inner {
    grid-template-columns: 56% 44%;
    align-items: stretch;
    min-height: 320px;
  }
  .at-hero-produit__col-text {
    grid-column: 1;
    min-width: 0;
  }
  .at-hero-produit__col-media {
    grid-column: 2;
    min-width: 0;
  }
}
.at-hero-produit__col-text {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 32px 24px;
}

@media (min-width: 64rem) {
  .at-hero-produit__col-text {
    padding: 48px 56px 104px var(--at-axis-left);
  }
}
.at-hero-produit__block {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.at-hero-produit__eyebrow {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #12678c;
}

.at-hero-produit__paren--l {
  color: #b0c700;
}

.at-hero-produit__paren--r {
  color: #eb7405;
}

.at-hero-produit__heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.at-hero-produit__title {
  margin: 0;
  font-size: clamp(2rem, 4vw, 48px);
  line-height: 1.16;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #12678c;
}

.at-hero-produit__accroche {
  margin: 0;
  font-size: 20px;
  line-height: 28px;
  font-weight: 400;
  color: #12678c;
}

.at-hero-produit__row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

@media (min-width: 40rem) {
  .at-hero-produit__row {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
  }
}
.at-hero-produit__atouts {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.at-hero-produit__atout {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  line-height: 20px;
  color: #00b4d8;
}

.at-hero-produit__atout::before {
  content: "✔";
  color: #00b4d8;
}

.at-hero-produit__atout-text {
  min-width: 0;
}

.at-hero-produit__atout a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color 0.15s ease;
}

.at-hero-produit__atout a:hover,
.at-hero-produit__atout a:focus-visible {
  color: var(--at-primary-900, #12678c);
}

.at-hero-produit__atout a:focus-visible {
  outline: 2px solid var(--at-primary-900, #12678c);
  outline-offset: 2px;
  border-radius: 2px;
}

.at-prix--hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--at-border-subtle);
  border-radius: 20px;
  background: #fff;
}

.at-prix--hero .at-prix__prefix {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: #12678c;
}

.at-prix--hero .at-prix__valeur {
  font-size: 28px;
  line-height: 36px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #12678c;
}

.at-prix--hero .at-prix__suffixe {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: #12678c;
  margin-top: 3px;
}

@media (min-width: 40rem) {
  .at-prix--hero {
    align-self: center;
  }
}
.at-hero-produit__cta {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 40rem) {
  .at-hero-produit__cta {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
  }
}
.at-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.at-btn::after {
  content: "→";
}

.at-btn--no-arrow::after {
  content: none;
}

.at-btn--primary {
  background: #00b4d8;
  color: #fff;
}

@media (hover: hover) {
  .at-btn--primary:hover {
    background: var(--at-gray-900);
    border-color: var(--at-gray-900);
    box-shadow: var(--at-shadow-hover);
  }
  .at-btn--outline:hover {
    background: #306589;
    border-color: #306589;
    color: #fff;
    box-shadow: var(--at-shadow-hover);
  }
}
.at-btn--outline {
  background: transparent;
  color: #12678c;
  border-color: #12678c;
}

/* Contour inverse (blanc) pour fonds sombres (cartes catégorie, hero produit…). */
.at-btn--invert {
  background: transparent;
  color: #fff;
  border-color: #fff;
}

/* Au survol/focus il se REMPLIT (blanc plein, texte marine). Déclenché par le bouton
   lui-même OU par la carte cliquable qui le contient (convention « cartes cliquables »). */
.at-btn--invert:hover,
.at-btn--invert:focus-visible,
.at-cat-card:hover .at-btn--invert,
.at-cat-card:focus-visible .at-btn--invert {
  background: #fff;
  color: #12678c;
  border-color: #fff;
}

.at-btn:focus-visible {
  outline: 3px solid #12678c;
  outline-offset: 2px;
}

.at-eyebrow {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--at-primary-600);
}

.at-eyebrow__paren--l {
  color: #b0c700;
}

.at-eyebrow__paren--r {
  color: #eb7405;
}

.at-section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  text-align: center;
}

@media (min-width: 64rem) {
  .at-section-header {
    margin-bottom: 48px;
  }
}
.at-section-title, .at-produits--archive .at-produits__fam-title {
  margin: 0;
  font-size: 36px;
  line-height: 44px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #12678c;
}

.at-section-subtitle {
  margin: 8px 0 0;
  font-size: 20px;
  line-height: 28px;
  font-weight: 400;
  color: var(--at-gray-900);
}

.at-icard {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 24px 20px;
  background: #fff;
  border: 1px solid var(--at-border-subtle);
  border-radius: 16px;
}

.at-icard__icon {
  flex: 0 0 auto;
  display: inline-flex;
}

.at-icard__icon svg {
  display: block;
}

.at-icard__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.at-icard__title,
.at-icard__text {
  margin: 0;
}

.at-icard--reassurance {
  background: rgba(255, 255, 255, 0.8);
}

.at-icard--reassurance .at-icard__icon {
  color: #00b4d8;
}

.at-icard--reassurance .at-icard__icon svg {
  width: auto;
  height: 40px;
}

.at-icard--reassurance .at-icard__title {
  font-size: 22px;
  line-height: 30px;
  font-weight: 700;
  color: #12678c;
}

.at-icard--reassurance .at-icard__text {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--at-gray-900);
}

.at-icard--point {
  padding-bottom: 16px;
}

.at-icard--point .at-icard__icon {
  color: #12678c;
}

.at-icard--point .at-icard__icon svg {
  width: 30px;
  height: 30px;
}

.at-icard--point .at-icard__title {
  font-size: 18px;
  line-height: 22px;
  font-weight: 500;
  color: #12678c;
}

.at-icard--point .at-icard__text {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--at-gray-900);
}

.at-band {
  --at-band-color: var(--at-surface-blue-50);
  --at-band-shadow: 0 0 0 0 transparent;
  background: var(--at-band-color);
  box-shadow: var(--at-band-shadow);
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}
@supports (width: 100cqw) {
  .at-band {
    width: 100cqw;
    margin-inline: calc(50% - 50cqw);
  }
}
.at-band {
  padding-block: 48px;
}

@media (min-width: 64rem) {
  .at-band {
    padding-block: 80px;
  }
}
.at-band + .at-band {
  padding-top: 0;
}

.at-band__inner {
  max-width: var(--at-content-max, 1200px);
  margin-inline: auto;
  padding-inline: var(--at-gutter);
}

.at-band__inner--narrow {
  max-width: 1060px;
}

.wp-block-columns.at-cols-wide,
.wp-block-columns.at-cols-wide.is-layout-flex {
  column-gap: clamp(2rem, 9vw, 128px);
  padding-block: 40px;
}

.at-photoband {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 16px;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding: 120px 24px 80px;
  background-color: #eff5fc;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.at-photoband > * {
  margin-block: 0;
}

.at-photoband::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1800/1141;
  z-index: -1;
  background: url("../img/faq-band-bg.jpg") top center/cover no-repeat;
  background-image: image-set(url("../img/faq-band-bg.avif") type("image/avif"), url("../img/faq-band-bg.webp") type("image/webp"), url("../img/faq-band-bg.jpg") type("image/jpeg"));
  opacity: 0.3;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}

.at-photoband::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(270deg, #eff5fc 11.11%, rgba(239, 245, 252, 0) 47.15%, #eff5fc 83.19%), linear-gradient(180deg, rgba(239, 245, 252, 0) 52.98%, #ffffff 87.45%);
}

.at-home__content .at-photoband::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 82%, #ffffff 100%), linear-gradient(270deg, #eff5fc 11.11%, rgba(239, 245, 252, 0) 47.15%, #eff5fc 83.19%), linear-gradient(180deg, rgba(239, 245, 252, 0) 52.98%, #ffffff 87.45%);
}

.at-photoband__col {
  width: 100%;
  max-width: var(--at-photoband-col, 680px);
  margin-inline: auto;
}

.at-photoband .at-faq__header {
  align-items: center;
  text-align: center;
}

@media (max-width: 39.999rem) {
  .at-photoband {
    padding: 64px 20px 48px;
    gap: 40px;
  }
}
.at-cards {
  --at-cards-cols: 1;
  --at-cards-gap: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--at-cards-gap);
}

.at-cards > * {
  flex: 0 1 calc((100% - (var(--at-cards-cols) - 1) * var(--at-cards-gap)) / var(--at-cards-cols));
}

@media (min-width: 40rem) {
  .at-cards {
    --at-cards-cols: 2;
  }
}
@media (min-width: 64rem) {
  .at-cards--3up {
    --at-cards-cols: 3;
  }
}
.at-carousel {
  --at-carousel-cols: 2;
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.at-carousel > * {
  flex: 0 0 80%;
  max-width: 340px;
  scroll-snap-align: start;
}

@media (min-width: 64rem) {
  .at-carousel {
    display: grid;
    grid-template-columns: repeat(var(--at-carousel-cols), 1fr);
    overflow: visible;
  }
  .at-carousel > * {
    flex: none;
    max-width: none;
  }
}
.at-hcarousel {
  position: relative;
}

.at-hcarousel__prev {
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid #00b4d8;
  background: #fff;
  color: #12678c;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.at-hcarousel__prev[hidden] {
  display: none;
}

.at-hcarousel__prev:focus-visible {
  outline: 3px solid #12678c;
  outline-offset: 2px;
}

@media (max-width: 63.999rem) {
  .at-hcarousel__prev {
    display: none;
  }
}
.at-hcarousel__track {
  display: flex;
  align-items: stretch;
  gap: var(--at-hcarousel-gap, 20px);
  margin: 0;
  padding: 0 0 20px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--at-gray-600) var(--at-border-subtle);
}

.at-hcarousel__track::-webkit-scrollbar {
  height: 8px;
}

.at-hcarousel__track::-webkit-scrollbar-track {
  background: var(--at-border-subtle);
  border-radius: 999px;
}

.at-hcarousel__track::-webkit-scrollbar-thumb {
  background: var(--at-gray-600);
  border-radius: 999px;
}

.at-hcarousel__track::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

.at-hcarousel__track > * {
  scroll-snap-align: start;
}

.at-illus {
  --at-illus-veil: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 94.61%);
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: 48px;
  background: #fff;
}

@media (min-width: 64rem) {
  .at-illus {
    padding-block: 80px;
    background-color: #eff5fc;
    background-image: var(--at-illus-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .at-illus::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--at-illus-veil);
  }
}
.at-illus__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

@media (min-width: 64rem) {
  .at-illus__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: 96px;
  }
  .at-illus__text {
    flex: 0 0 440px;
  }
  .at-illus__content {
    flex: 1 1 auto;
    min-width: 0;
  }
  .at-illus__text .at-section-header {
    align-items: flex-start;
    text-align: left;
  }
}
.at-hero-produit__col-media {
  position: relative;
  display: none;
  min-height: 240px;
}

@media (min-width: 64rem) {
  .at-hero-produit__col-media {
    display: grid;
    min-height: 320px;
    border-radius: 16px;
    overflow: hidden;
  }
}
.at-hero-produit__col-media > * {
  grid-area: 1/1;
}

.at-hero-produit__accent {
  align-self: start;
  height: 14px;
  z-index: 1;
  background: var(--at-accent, var(--wp--preset--color--accent-1));
}

.single-destination .at-hero-produit__accent {
  display: none;
}

.at-hero-produit--page .at-hero-produit__accent {
  display: none;
}

@media (min-width: 64rem) {
  .at-hero-produit--page .at-hero-produit__col-text {
    padding-bottom: 48px;
  }
}
.single-destination .at-reassurance,
.post-type-destination .at-reassurance {
  --at-band-color: #fff;
}

.at-hero-produit__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}

.at-moteur {
  padding: 24px;
  background: #12678c;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.at-moteur__titre {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}

.at-moteur__note {
  margin: 0;
  opacity: 0.9;
}

.at-moteur__form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.at-moteur__fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.at-moteur__field {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.at-moteur__field[hidden] {
  display: none;
}

.at-moteur__select {
  width: 100%;
  height: 52px;
  padding: 0 44px 0 16px;
  border: 1px solid var(--at-border-subtle, #dde3ea);
  border-radius: 8px;
  background-color: #fff;
  color: var(--at-gray-900, #1a2332);
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2312678c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

.at-moteur__select:focus {
  outline: none;
  border-color: var(--at-primary-800, #00b4d8);
  box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.15);
}

.at-moteur__btn {
  width: 100%;
}

.at-moteur__btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (min-width: 64rem) {
  .at-moteur__form {
    flex-direction: row;
    align-items: stretch;
    gap: 16px;
    margin-top: 4px;
  }
  .at-moteur__fields {
    flex: 1 1 auto;
    flex-direction: row;
    gap: 16px;
  }
  .at-moteur__btn {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
  }
}
.at-hero-produit__moteur {
  margin: 0;
  border-radius: 0;
}

@media (min-width: 64rem) {
  .at-hero-produit__moteur {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 65%);
    z-index: 2;
    width: min(1280px, 88.9vw);
    padding: 32px 64px;
    border-radius: 16px;
  }
}
.at-hero-home {
  position: relative;
  width: 100%;
  padding-block: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--at-primary-900, #12678c);
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

body.home .at-main {
  padding-top: 0;
}

.at-hero-home__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

.at-hero-home::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, #12678c 11.48%, rgba(3, 42, 94, 0) 75.93%);
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

.at-hero-home__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 844px;
  margin-inline: auto;
  padding-inline: var(--at-gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.at-hero-home__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.at-hero-home__title {
  margin: 0;
  font-size: 32px;
  line-height: 40px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
  text-align: center;
}

.at-hero-home__subtitle {
  margin: 0;
  max-width: 580px;
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
  color: #fff;
  text-align: center;
}

.at-hero-home__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.at-hero-home__pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

.at-hero-home__pill-check {
  display: inline-flex;
  line-height: 1;
}

.at-hero-home__moteur {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: 24px;
  border-radius: 16px;
}

@media (min-width: 64rem) {
  .at-hero-home {
    min-height: 540px;
    padding-block: 80px;
    margin-bottom: 140px;
  }
  .at-hero-home__title {
    font-size: 48px;
    line-height: 56px;
  }
  .at-hero-home__subtitle {
    font-size: 20px;
    line-height: 28px;
  }
  .at-hero-home__moteur {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 65%);
    z-index: 2;
    width: min(1280px, 88.9vw);
    margin-top: 0;
    padding: 32px 64px;
    border-radius: 16px;
  }
}
.at-produit {
  overflow-x: clip;
}

.at-produit__content,
.at-destination__content,
.at-home__content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

:where(.at-produit__content, .at-destination__content, .at-home__content) > * {
  padding-block: 32px;
}

.at-produit__content > :first-child::before,
.at-destination__content > :first-child::before {
  content: "";
  display: block;
  height: 4rem;
}

@media (min-width: 64rem) {
  .at-produit__content > :first-child::before,
  .at-destination__content > :first-child::before {
    height: 140px;
  }
}
@media (max-width: 63.999rem) {
  .at-band__inner {
    padding-inline: var(--at-gutter);
  }
  .at-produit__content > .at-formules,
  .at-produit__content > .at-gar {
    padding-inline: 0;
  }
  .at-produit__content .at-docs__inner {
    padding-inline: 0;
  }
}
.at-produit-card {
  position: relative;
  display: grid;
  width: 100%;
  max-width: 340px;
  height: 412px;
  margin-inline: auto;
  border-radius: 16px;
  overflow: hidden;
  background: #12678c;
  transition: box-shadow 0.2s ease;
}

.at-produit-card > * {
  grid-area: 1/1;
}

.at-produit-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}

.at-produit-card__scrim,
.at-produit-card__accent,
.at-produit-card__content {
  position: relative;
  z-index: 1;
}

@media (hover: hover) {
  .at-produit-card:hover {
    box-shadow: 0 4px 15px rgba(18, 103, 140, 0.35);
  }
  .at-produit-card:hover .at-produit-card__scrim {
    background: linear-gradient(180deg, #12678c 12.86%, rgba(18, 103, 140, 0.7) 52.05%);
  }
  .at-produit-card:hover .at-produit-card__more {
    color: #fff;
  }
}
.at-produit-card__scrim {
  background: linear-gradient(180deg, #12678c 12.86%, rgba(85, 146, 172, 0.8) 35.19%, rgba(135, 178, 197, 0) 52.05%, #ffffff 91.99%);
}

.at-produit-card__accent {
  align-self: start;
  height: 14px;
  background: var(--at-accent, var(--wp--preset--color--accent-1));
}

.at-produit-card__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 40px 32px 32px;
  text-align: center;
}

.at-produit-card__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.at-produit-card__title {
  margin: 0;
  font-size: 28px;
  line-height: 36px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: center;
  color: #ffffff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.at-produit-card__link {
  color: inherit;
  text-decoration: none;
}

.at-produit-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.at-produit-card__accroche {
  margin: 0;
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
  text-align: center;
  color: #ffffff;
}

.at-produit-card__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.at-prix--card {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 36px;
  max-width: 100%;
  margin: 0;
  padding: 0 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.8);
}

.at-prix--card .at-prix__prefix {
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  text-transform: lowercase;
  color: #12678c;
}

.at-prix--card .at-prix__montant {
  min-width: 0;
  flex-wrap: wrap;
  justify-content: center;
}

.at-prix--card .at-prix__valeur {
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: center;
  font-size: 28px;
  line-height: 36px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #12678c;
}

.at-prix--card .at-prix__suffixe {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: #12678c;
  margin-top: 3px;
}

.at-produit-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #12678c;
  transition: color 0.2s ease;
}

.at-produit-card__arrow {
  font-size: 11px;
}

.at-produit-card:focus-within {
  outline: 3px solid var(--at-accent, var(--wp--preset--color--accent-1));
  outline-offset: 2px;
}

.at-produit-card__link:focus-visible {
  outline: none;
}

.at-archive-header {
  margin-block: var(--wp--preset--spacing--30, 1.5rem);
}

.at-archive-desc {
  color: var(--wp--preset--color--muted, #5b6b70);
}

.at-related {
  margin-block-start: var(--wp--preset--spacing--50, 4rem);
  padding-block-start: var(--wp--preset--spacing--40, 2.5rem);
  border-top: 1px solid var(--wp--preset--color--line, #dce6ea);
}

.at-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--wp--preset--spacing--30, 1.5rem);
  margin-block-start: var(--wp--preset--spacing--30, 1.5rem);
}

/* ============================================================================
   Carte catégorie (« Cat Card ») — index blog + listing de sous-catégories.
   Toute la carte est un lien. Image de fond + voile + N articles + nom + Découvrir.
   Couleurs de marque en dur (à tokeniser H0).
   ============================================================================ */
/* Carte catégorie — réf. Figma « Cat Cards » (relevé Dev Mode 11/08). */
.at-cat-card {
  position: relative;
  display: flex;
  flex-direction: column; /* le body remplit la hauteur → filet à offset fixe */
  min-height: 350px;
  border-radius: 16px; /* space/16 */
  overflow: hidden;
  background: #0e4b5a;
  color: #fff;
  text-decoration: none;
}

.at-cat-card__media {
  position: absolute;
  inset: 0;
}

.at-cat-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Voile dégradé bas (Rectangle 6). */
.at-cat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(360deg, #12678c 24.26%, rgba(18, 103, 140, 0.05) 81.18%);
}

/* Survol/focus de la carte (convention « cartes cliquables » : hover + focus au niveau carte).
   Carte entièrement cliquable via le <a> englobant → :hover / :focus-visible portent l'état. */
.at-cat-card:hover::after,
.at-cat-card:focus-visible::after {
  background: linear-gradient(360deg, #1a2332 0%, rgba(26, 35, 50, 0.2) 100%);
}

.at-cat-card:focus-visible {
  outline: 3px solid #1a2332;
  outline-offset: 2px;
}

.at-cat-card__body {
  position: relative;
  z-index: 1;
  flex: 1; /* remplit la hauteur */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* filet haut / nom centré / bouton bas (Figma) */
  gap: 12px; /* space/12 (gap minimal) */
  padding: 160px 24px 32px; /* desktop : top 160 / côtés 24 / bas 32 (relevé) */
}

/* « N articles » + filet pointillé pleine largeur (Frame 583). */
.at-cat-card__count {
  font-size: 10px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
  color: #fff;
  padding-bottom: 4px; /* space/4 texte → filet */
  border-bottom: 1px dashed #fff;
}

.at-cat-card__name {
  font-size: 22px;
  line-height: 30px; /* display/h4-Bold */
  font-weight: 700;
  text-align: center;
  color: #fff;
}

/* Bouton = primitive .at-btn.at-btn--outline.at-btn--invert ; centré horizontalement (bas via space-between). */
.at-cat-card__cta {
  align-self: center;
}

/* Mobile (< 40rem) : mêmes zones (haut/centre/bas), paddings du relevé mobile. */
@media (max-width: 39.999rem) {
  .at-cat-card__body {
    padding: 48px 12px 32px; /* top 48 / côtés 12 / bas 32 */
  }
}
/* Grille catégories : 4 colonnes desktop, gouttière 24px (relevé Figma). */
.at-cards--4up {
  --at-cards-gap: 24px;
}

@media (min-width: 64rem) {
  .at-cards--4up {
    --at-cards-cols: 4;
  }
}
/* Hero /blog + recherche — réf. Figma « HERO BLOG » (relevé Dev Mode 11/08). */
.at-blog-hero.at-band {
  --at-band-color: var(--at-surface-blue-100); /* surface/blue/100 (spécifique hero) */
  padding-block: 48px 40px; /* mobile */
  border-bottom-left-radius: 16px; /* radius/lg */
  border-bottom-right-radius: 16px;
}

.at-blog-hero .at-band__inner {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 32px; /* Inner : space/32 entre eyebrow+titre / sous-titre / recherche */
}

.at-blog-hero__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px; /* eyebrow → titre (Frame 586) */
}

.at-blog-hero .at-section-subtitle {
  margin: 0;
  max-width: 620px;
  color: #12678c; /* brand/primary/900 (le sous-titre hero diffère du défaut #1a2332) */
}

.at-blog-hero__search {
  width: 100%;
}

@media (min-width: 64rem) {
  .at-blog-hero.at-band {
    padding-block: 96px 80px;
  } /* Top 96 / Bottom 80 */
}
/* Section « Explorez par thème » — réf. Figma (padding 80 / gap header→grille 48). */
.at-blog-index {
  padding-block: 48px;
} /* mobile */
.at-blog-archive {
  padding-block: 64px;
}

.at-blog-index .at-section-header {
  margin-bottom: 48px;
} /* header → grille (space/48) */
.at-blog-archive .at-archive-header {
  margin-bottom: 40px;
}

@media (min-width: 64rem) {
  .at-blog-index {
    padding-block: 80px;
  } /* desktop (relevé) */
}
/* Section « À la une » (index blog) — bande #E6F4FB, en-tête titre gauche / onglets droite. */
.at-latest.at-band {
  --at-band-color: var(--at-surface-blue-100); /* surface/blue/100 */
  padding-block: 48px; /* mobile */
}

@media (min-width: 64rem) {
  .at-latest.at-band {
    padding-block: 80px;
  } /* desktop (relevé) */
}
.at-latest__head {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 48px; /* en-tête → grille (space/48) */
}

@media (min-width: 64rem) {
  .at-latest__head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
  }
}
.at-latest__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.at-latest__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Onglet de filtre (chip) — réf. Figma « Cat-Filtres ». Inactif = blanc/contour ; actif = survol = plein marine. */
.at-filter {
  font-family: inherit;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #12678c;
  background: #fff; /* neutral/gray/0 */
  border: 1px solid var(--at-border-subtle); /* neutral/gray/200 */
  border-radius: 999px; /* radius/xl */
  padding: 4px 10px; /* relevé */
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Actif ET survol : plein marine, texte blanc (« Tous » = état actif/hover de la maquette). */
.at-filter.is-active {
  background: #12678c;
  border-color: #12678c;
  color: #fff;
}

@media (hover: hover) {
  .at-filter:hover {
    background: #12678c;
    border-color: #12678c;
    color: #fff;
  }
}
.at-filter:focus-visible {
  outline: 3px solid #12678c;
  outline-offset: 2px;
}

/* Groupes pré-rendus : seul le groupe actif est visible. `hidden` doit gagner sur display:grid. */
.at-latest__group[hidden] {
  display: none;
}

/* ============================================================================
   Hero de catégorie (archive Blog) — composition 2 colonnes (texte / image) INSPIRÉE du hero
   produit, montée sur les primitives existantes (.at-band + .at-band__inner + .at-section-title
   + at_eyebrow). Aucune reprise du CSS produit. Surface --at-surface-blue-100 (univers Blog).
   Image visible sur mobile, sous le contenu ; cadrage paysage via object-fit. Hauteur intrinsèque.
   ============================================================================ */
.at-cat-hero.at-band {
  --at-band-color: var(--at-surface-blue-100);
}

.at-cat-hero__inner {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--at-gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}

.at-cat-hero__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.at-cat-hero__desc {
  font-size: 20px;
  line-height: 28px;
  color: #12678c;
}

.at-cat-hero__desc > :first-child {
  margin-top: 0;
}

.at-cat-hero__desc > :last-child {
  margin-bottom: 0;
}

.at-cat-hero__media {
  display: none;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}

.at-cat-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 64rem) {
  .at-cat-hero.at-band:has(.at-cat-hero__media) {
    padding-block: 0;
  }
  .at-cat-hero__media {
    display: block;
  }
  .at-cat-hero__inner:has(.at-cat-hero__media) {
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
    grid-template-columns: minmax(1.5rem, 1fr) minmax(0, 700px) minmax(0, 44vw);
    column-gap: 56px;
    row-gap: 0;
    align-items: stretch;
  }
  .at-cat-hero__inner:has(.at-cat-hero__media) .at-cat-hero__text {
    grid-column: 2;
    padding-block: 80px;
  }
  .at-cat-hero__inner:has(.at-cat-hero__media) .at-cat-hero__media {
    grid-column: 3;
  }
  .at-cat-hero__inner:has(.at-cat-hero__media) .at-cat-hero__img {
    height: 100%;
  }
}
/* ============================================================================
   Pagination d'archive — primitive TRANSVERSE (catégories feuilles, étiquettes, recherche…).
   Reprend le langage des chips .at-filter : contour neutre, actif/hover plein marine. Tokenisé.
   Aucun style propre à .at-cat-* : sert toutes les archives (the_posts_pagination).
   ============================================================================ */
.at-main .pagination {
  margin-top: 48px;
}

.at-main .pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.at-main .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--at-border-subtle);
  border-radius: 999px;
  background: #fff;
  color: #12678c;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.at-main .page-numbers.current {
  background: #12678c;
  border-color: #12678c;
  color: #fff;
}

.at-main .page-numbers.dots {
  border-color: transparent;
  background: transparent;
}

@media (hover: hover) {
  .at-main a.page-numbers:hover {
    background: #12678c;
    border-color: #12678c;
    color: #fff;
  }
}
.at-main a.page-numbers:focus-visible {
  outline: 3px solid #12678c;
  outline-offset: 2px;
}

/* ============================================================================
   Pré-footer — DERNIER enfant de .at-main (dans le flux), à cheval sur le footer.
   Ancrage INVERSÉ : le BAS de la carte plonge d'une profondeur CONSTANTE
   (--at-prefooter-footer-overlap) dans le footer ; toute hauteur en plus (Devis, mobile) se
   développe vers le HAUT dans le flux → jamais de recouvrement, aucune dépendance à la hauteur.
   Le bandeau pleine largeur derrière la carte prend la surface de fin de page via le contrat
   --at-page-end-surface (voir « Contrat de fin de page »). Rien si variante « Aucun ».
   ============================================================================ */
/* Bandeau de réserve pleine largeur : prolonge la surface de fin de page sous la carte. */
.at-prefooter {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-inline: var(--at-gutter);
  background: var(--at-page-end-surface, #fff);
  padding-top: var(--at-page-end-space, 64px); /* respiration de fin de page — portée par le pré-footer */
}

/* La carte plonge du token dans le footer (seul chevauchement). z-index : elle est dans .at-main
   (frère précédent du footer) et doit passer AU-DESSUS du fond sombre. */
.at-prefooter__card {
  position: relative;
  z-index: 1;
  margin-bottom: calc(-1 * var(--at-prefooter-footer-overlap));
  max-width: 1064px; /* relevé */
  margin-inline: auto;
  padding: 40px 24px;
  border-radius: 16px;
  background: #12678c;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.at-prefooter__title {
  margin: 0;
  max-width: 700px; /* relevé : titre sur 1 ligne (desktop) ; s'enroule sous 700 en mobile */
  font-size: 36px;
  line-height: 44px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
}

.at-prefooter__text {
  margin: 0;
  max-width: 46ch;
  font-size: 20px;
  line-height: 28px;
  color: #fff;
}

.at-prefooter .at-eyebrow {
  color: #fff; /* sur-titre lisible sur fond marine */
}

/* Newsletter : champ e-mail + bouton. */
.at-prefooter__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 700px;
  margin-top: 8px;
}

.at-prefooter__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 56px;
  border: 0;
  border-radius: 12px;
  padding: 0 18px;
  background: #fff;
  font-family: inherit;
  font-size: 15px;
  color: #12678c;
}

.at-prefooter__input::placeholder {
  color: #6c7a89;
}

.at-prefooter__input:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.at-prefooter__submit {
  flex: 0 0 auto;
}

/* Devis : téléphone sous le bouton. */
.at-prefooter__tel {
  margin: 0;
  font-size: 15px;
  color: #fff;
}

.at-prefooter__tel a {
  color: #fff;
  text-decoration: underline;
}

@media (min-width: 40rem) {
  .at-prefooter__form {
    flex-direction: row;
  }
}
@media (min-width: 64rem) {
  .at-prefooter__card {
    padding: 40px;
  }
}
/* ---- Footer sombre : structure (réf. Figma « FOOTER ») ---- */
.at-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.at-footer__main {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 20px;
}

.at-footer__brand {
  flex: 1 1 100%; /* mobile : pleine largeur, centré */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}

.at-footer__logo {
  width: 153px;
  height: auto;
}

.at-footer__logo-text {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}

.at-footer__baseline {
  margin: 0;
  font-size: 22px;
  line-height: 30px;
  font-weight: 700;
  color: #fff;
}

.at-footer__contact {
  display: flex;
  flex-direction: column; /* mobile empilé */
  align-items: center;
  gap: 8px;
}

.at-footer__contact-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
}

.at-footer__ico {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.at-footer__socials {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.at-footer__social {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px; /* cercle visible — relevé Figma. Le cercle est porté par l'icône (badge SVG de Luc), pas par une bordure CSS. */
  height: 25px;
  border-radius: 999px; /* conservé pour le fond du survol + la forme du focus */
  color: #fff;
}

/* Zone cliquable réelle ~44px (accessibilité) sans agrandir le cercle ni écarter les icônes. */
.at-footer__social::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.at-footer__social:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.at-footer__social-ico {
  width: 100%;
  height: 100%;
} /* badge SVG plein (cercle + glyphe) */
.at-footer__col {
  flex: 1 1 40%;
} /* mobile : 2 colonnes côte à côte */
.at-footer__col-title {
  margin: 0 0 32px;
  font-size: 22px;
  line-height: 30px;
  font-weight: 700;
  color: #fff;
}

.at-footer__menu {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px; /* relevé : items gap 8 */
}

.at-footer__menu a {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  line-height: 24px;
}

.at-footer__divider {
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid #d6dee5;
}

.at-footer__bottom {
  display: flex;
  flex-direction: column; /* mobile centré */
  align-items: center;
  gap: 8px;
  text-align: center;
}

.at-footer__copy {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  color: #fff;
}

.at-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  line-height: 16px;
}

.at-footer__legal a {
  color: #fff;
  text-decoration: none;
}

.at-footer__legal li + li::before {
  content: "|";
  margin-right: 8px;
  color: rgba(255, 255, 255, 0.55);
}

@media (hover: hover) {
  .at-footer__menu a:hover,
  .at-footer__contact-item:hover,
  .at-footer__legal a:hover {
    text-decoration: underline;
  }
  .at-footer__social:hover {
    background: rgba(255, 255, 255, 0.15);
  }
}
@media (min-width: 64rem) {
  .at-site-footer {
    padding-right: 80px;
    padding-left: 80px;
    padding-bottom: 40px;
  }
  .at-footer__main {
    flex-wrap: nowrap;
    align-items: flex-start;
  }
  .at-footer__brand {
    flex: 1 1 auto;
    max-width: 846px;
    align-items: flex-start;
    text-align: left;
  }
  .at-footer__contact {
    flex-direction: row;
    gap: 32px;
  }
  .at-footer__col {
    flex: 0 0 197px;
  }
  .at-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
  .at-footer__legal {
    justify-content: flex-end;
    flex-wrap: nowrap;
  }
}
/* Barre de recherche — réf. Figma : boîte blanche = INPUT seul (radius/md2) + bouton btn/Primary séparé. */
.at-search {
  display: flex;
  align-items: center;
  gap: 12px; /* input ↔ bouton (séparés sur le fond bleu) */
  width: 100%;
  max-width: 700px;
  margin-inline: auto;
}

.at-search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 56px; /* boîte blanche */
  background: #fff;
  border: 0;
  border-radius: 12px; /* radius/md2 */
  padding: 0 18px; /* pl 18 (placeholder) */
  font-family: inherit;
  font-size: 15px; /* DM Sans 400 15px */
  color: #12678c;
}

.at-search__input::placeholder {
  color: #6c7a89;
} /* neutral/gray/600 */
.at-search__input:focus {
  outline: none;
}

.at-search__submit {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Fil d'Ariane — bande pleine largeur (réf. Figma « Breadcrumb »). Couleurs en dur (H0). */
.at-breadcrumb {
  border-top: 1px solid #eff5fc;
  border-bottom: 1px solid #eff5fc;
  padding-block: 8px;
  padding-left: var(--at-axis-left);
  padding-right: var(--at-gutter);
  font-size: 12px;
  line-height: 16px;
  color: #4a5568;
}

/* Bande flush sous l'en-tête : annule le padding-haut de .at-main quand le fil d'ariane ouvre la page. */
.at-main:has(> .at-breadcrumb) {
  padding-top: 0;
}

/* Bande flush au-dessus du footer — SANS pré-footer : si la page se TERMINE par une SECTION
   full-bleed AUTO-RYTHMÉE (.at-band / .at-illus), c'est elle qui porte la respiration de fin
   → on neutralise le padding-bas par défaut de .at-main (sinon une bande blanche apparaît sous
   la section). Critère STRUCTUREL (pas la couleur) : ces primitives sont pleine largeur et
   portent toujours leur propre padding-block (48/80px). Deux positions terminales, comme le
   contrat de fin de page : enfant DIRECT de .at-main, OU dernier bloc d'un conteneur de contenu. */
body:not(.at-has-prefooter) .at-main:has(> :is(.at-band, .at-illus):last-child),
body:not(.at-has-prefooter) .at-main:has(:is(.at-produit__content, .at-destination__content, .at-article__content, .at-page__content, .at-home__content) > :is(.at-band, .at-illus):last-child) {
  padding-bottom: 0;
}

/* ============================================================================
   Contrat de fin de page — surface ET respiration de transition derrière le pré-footer.
   Le bandeau .at-prefooter prolonge la dernière surface de la page.

   CONTRAT PAR SURFACE (jamais par bloc) :
   Un bloc/section à fond qui PEUT terminer une page déclare sa surface sémantique via une classe
   marqueur `.at-surface--{token}` — PUR marqueur de détection, SANS style propre → il ne change
   AUCUN rendu (les fonds des blocs restent définis chez eux). Le pré-footer ne connaît QUE les
   surfaces possibles, chacune mappée UNE fois vers son TOKEN (aucun hex dupliqué, aucun nom de bloc).
     → Nouveau bloc réutilisant une surface existante : fonctionne sans nouvelle règle (il porte le marqueur).
     → Nouvelle couleur éventuelle : un seul mapping de surface à ajouter ici, jamais un mapping de bloc.
   (Rappel CSS : une custom property n'hérite que vers le bas et un frère ne lit pas la variable d'un
   autre frère → impossible de « remonter » --at-band-color jusqu'à .at-main ; d'où la détection par
   classe via :has(), et le mapping surface→token ci-dessous.)

   Deux positions terminales détectées :
     - enfant DIRECT de .at-main juste avant le pré-footer (archives/blog : la boucle rend la bande
       directement dans .at-main) ;
     - dernier bloc du CONTENU imbriqué (article / produit / destination).
   Fallback : blanc si aucune surface déclarée (dernier bloc blanc / non teinté). */
.at-main {
  --at-page-end-space: 64px; /* distance avant la carte du pré-footer — mobile */
}

@media (min-width: 64rem) {
  .at-main {
    --at-page-end-space: 80px;
  } /* desktop (test) */
}
/* --at-page-end-surface = SOURCE UNIQUE de la couleur de fin de page, portée par le BODY (ancêtre
   commun de .at-main / .at-prefooter ET du footer). Défaut blanc. Une seule table surface→token
   alimente TOUS les usages : espacement de fin, fond du pré-footer, et raccord derrière le footer.
   Trois positions terminales détectées, AVEC ou SANS pré-footer :
     - bande full-bleed = dernier enfant direct de .at-main (archives/blog) ;
     - bande full-bleed juste avant le pré-footer ;
     - dernier bloc d'un conteneur de contenu (produit/destination/article/page/home).
   Fallback : blanc (dernière surface blanche/non teintée → raccord blanc neutre). */
body {
  --at-page-end-surface: #fff;
}

body:has(.at-main > .at-surface--blue-50:last-child),
body:has(.at-main > .at-surface--blue-50 + .at-prefooter),
body:has(:is(.at-produit__content, .at-destination__content, .at-article__content, .at-page__content, .at-home__content) > .at-surface--blue-50:last-child) {
  --at-page-end-surface: var(--at-surface-blue-50);
}

body:has(.at-main > .at-surface--blue-100:last-child),
body:has(.at-main > .at-surface--blue-100 + .at-prefooter),
body:has(:is(.at-produit__content, .at-destination__content, .at-article__content, .at-page__content, .at-home__content) > .at-surface--blue-100:last-child) {
  --at-page-end-surface: var(--at-surface-blue-100);
}

body:has(.at-main > .at-surface--gray-50:last-child),
body:has(.at-main > .at-surface--gray-50 + .at-prefooter),
body:has(:is(.at-produit__content, .at-destination__content, .at-article__content, .at-page__content, .at-home__content) > .at-surface--gray-50:last-child) {
  --at-page-end-surface: var(--at-gray-50);
}

/* .at-surface--white : déclaration explicite d'une surface blanche = identique au fallback → aucun
   mapping nécessaire (le défaut .at-main s'applique). Le marqueur reste posé pour l'intention. */
/* Contrat de fin de page : le PRÉ-FOOTER porte la respiration (--at-page-end-space) ; la dernière
   section ne l'ajoute pas (bord bas neutralisé) → même distance visuelle partout, dans la surface
   héritée, sans intervention éditoriale ni règle par template. */
.at-main > :has(+ .at-prefooter) {
  padding-bottom: 0;
} /* frère direct : bande, archive, blog… */
.at-container:has(+ .at-prefooter) > .at-article {
  padding-bottom: 0;
} /* article sans bande (wrapper imbriqué) */
.at-produit:has(+ .at-prefooter) .at-produit__content > :last-child {
  padding-bottom: 0;
} /* produit : bord du dernier bloc */
.at-destination:has(+ .at-prefooter) .at-destination__content > :last-child {
  padding-bottom: 0;
} /* destination : idem (le contrat couvrait produit, pas destination) */
/* Avec pré-footer, .at-main ne réserve rien en bas : la carte est dans le flux et plonge
   d'elle-même dans le footer (margin-bottom). On neutralise le padding-bas du wrapper pour que
   le bas du bandeau coïncide avec le haut du footer. */
.at-has-prefooter .at-main {
  padding-bottom: 0;
}

.at-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.at-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #4a5568;
}

.at-breadcrumb__item:not(:last-child)::after {
  content: ">";
  color: #4a5568;
  font-size: 13px;
  line-height: 1;
}

.at-breadcrumb__item a {
  color: #4a5568;
  text-decoration: none;
}

.at-breadcrumb__item a:hover {
  text-decoration: underline;
}

.at-breadcrumb__item [aria-current=page] {
  color: #12678c;
}

/* Affiché UNIQUEMENT en desktop (≥ 64rem), conforme à la maquette. Masqué mobile + tablette.
   Le JSON-LD BreadcrumbList (hors <nav>) reste émis quelle que soit la taille d'écran. */
@media (max-width: 63.999rem) {
  .at-breadcrumb {
    display: none;
  }
}
.at-resume {
  padding: 20px 24px;
  border-inline-start: 4px solid var(--at-primary-800);
  border-radius: 16px;
  background: var(--at-surface-blue-50);
}

.at-resume__title {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 26px;
  font-weight: 500;
  color: var(--at-primary-900);
}

.at-resume__content {
  font-size: 14px;
  line-height: 20px;
  color: var(--at-gray-900);
}

.at-resume__content > :first-child {
  margin-top: 0;
}

.at-resume__content > :last-child {
  margin-bottom: 0;
}

.at-resume__content p {
  margin: 0;
}

.at-resume__content p + p,
.at-resume__content p + ul,
.at-resume__content p + ol,
.at-resume__content ul + p,
.at-resume__content ol + p {
  margin-top: 8px;
}

.at-resume__content ul,
.at-resume__content ol {
  margin: 0;
  padding-inline-start: 1.25em;
}

.at-resume__content li + li {
  margin-top: 4px;
}

.at-resume__content a {
  color: var(--at-primary-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ============================================================
   core/media-text — habillage GLOBAL VOLONTAIRE (ciblé sur .wp-block-media-text, sans style ni variation).
   POURQUOI global et non scopé à une classe : le bloc n'est autorisé QUE sur les fiches produit
   (voir at_allowed_blocks_produit dans inc/blocks.php), où l'on veut TOUJOURS ce même rendu. On évite
   ainsi un style de bloc à sélectionner — rappel : register_block_style + is_default N'ÉCRIT PAS la
   classe dans post_content (le défaut = absence de classe), donc ni fiable ni stable pour scoper le CSS.
   Si un jour core/media-text est autorisé ailleurs avec d'autres designs : introduire alors un
   style/variation explicite (classe persistée) et migrer les blocs produit existants. Sections « texte + image ».
   Mobile-first : UNE colonne, TOUJOURS texte puis image, quelle que soit la position
   desktop. Desktop (>= 64rem) : deux colonnes 50/50, image à gauche ou à droite selon
   le réglage natif (choix explicite, pas de nth-child). Colonnes/gap/rayon imposés ;
   padding interne natif (0 8%) retiré. mediaWidth neutralisé (colonnes forcées).
   ============================================================ */
.wp-block-media-text {
  grid-template-columns: 100% !important; /* neutralise le style inline mediaWidth + le 2-col natif (mobile) */
  gap: 24px; /* Figma (panneau Layout) */
}

.wp-block-media-text > .wp-block-media-text__content {
  grid-column: 1 !important;
  grid-row: 1 !important; /* TEXTE en premier (mobile) */
  padding: 0 !important; /* retire le padding: 0 8% natif */
  align-self: center !important; /* texte centré verticalement (annule le réglage vertical natif) */
}

.wp-block-media-text > .wp-block-media-text__media {
  grid-column: 1 !important;
  grid-row: 2 !important; /* IMAGE ensuite (mobile) */
  align-self: center !important; /* image CENTRÉE verticalement (impression d'alignement avec le texte, colonne G ou D) */
}

.wp-block-media-text .wp-block-media-text__media :is(img, video) {
  border-radius: 16px; /* radius/lg — comme le hero produit */
}

@media (min-width: 64rem) {
  .wp-block-media-text {
    grid-template-columns: 1fr 1fr !important; /* 50/50 Figma */
    align-items: start;
    column-gap: 48px; /* space/48 entre colonnes (Figma) */
  }
  .wp-block-media-text > .wp-block-media-text__media {
    grid-column: 1 !important;
    grid-row: 1 !important; /* image à gauche (défaut) */
  }
  .wp-block-media-text > .wp-block-media-text__content {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__media {
    grid-column: 2 !important; /* image à droite */
  }
  .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content {
    grid-column: 1 !important;
  }
}
/* ============================================================================
   Pages éditoriales (gabarit page.php).
   RÉUTILISE la grille structurelle de l'Article (.at-article__layout : main 1fr + sidebar 302 +
   aside sticky). La Page ne définit AUCUNE grille propre : elle ajuste seulement le gap (60, relevé)
   et n'applique PAS le plafond de prose 760 (les blocs remplissent toute la largeur de `main`).
   Conteneur propre au gabarit (relevé : zone 1280, gouttière 80px desktop / 20 mobile), partagé
   par le hero et le corps pour un alignement identique. Aucun impact sur les Articles.
   Tokens : surface-blue-100, primary-900, spacing/40+50, .at-eyebrow, .at-partez-assure.
   ============================================================================ */
/* Conteneur du gabarit Page (hero + corps) → même gouttière pour tout aligner. */
.at-page {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--at-gutter); /* 20px mobile */
}

@media (min-width: 64rem) {
  .at-page {
    padding-inline: 80px; /* relevé desktop → zone de contenu 1280px */
  }
}
/* Rythme vertical du corps (relevé : space/64). */
.at-page__body {
  padding-block: var(--wp--preset--spacing--50, 4rem);
}

/* Colonne principale de la Page : PAS de plafond de prose (contrairement à .at-article__content).
   Le rythme vertical entre blocs (24px, relevé Main space/24) est porté par la prose éditoriale
   partagée (_elements.scss : .at-article__content + .at-page__content), pas dupliqué ici. */
.at-page__content {
  max-width: none;
}

/* Mobile : l'aside est AVANT le contenu dans le DOM (comme single.php) → sidebar au-dessus du contenu.
   La séparation avant le contenu est portée par .at-article__aside (margin-bottom mobile hérité de
   l'Article). Aucune règle d'ordre propre à la Page : on réutilise strictement le comportement Article. */
@media (min-width: 64rem) {
  /* Gap main↔sidebar propre à la Page : 60px (relevé exact ; hors échelle DS, assumé) → main ~918px.
     Le scope .at-page n'affecte pas l'Article (qui garde 40). */
  .at-page .at-article__layout {
    column-gap: 60px;
  }
  /* Placement explicite (comme .at-article__content) : contenu en col.1/ligne 1 ; l'aside est en
     col.2/ligne 1 + sticky, hérité de .at-article__aside. Le desktop est ainsi indépendant de l'ordre
     DOM (identique avant/après le passage de l'aside en premier). Pas de plafond de prose. */
  .at-page__content {
    grid-column: 1;
    grid-row: 1;
  }
}
/* --- Hero de page : bandeau bleu clair PLEINE LARGEUR ; contenu aligné via .at-page. --- */
.at-page-hero {
  background: var(--at-surface-blue-100); /* surface/blue/100 (relevé) */
}

.at-page-hero__inner {
  display: flex;
  flex-direction: column;
  gap: 16px; /* relevé PAGE HEADER : gap 16 */
  padding-block: 56px; /* relevé desktop */
}

@media (max-width: 63.999rem) {
  .at-page-hero__inner {
    padding-block: 40px;
  }
}
@media (min-width: 64rem) {
  .at-page-hero__inner,
  .at-cat-hero__inner {
    max-width: none;
    margin-inline: 0;
    padding-left: var(--at-axis-left);
    padding-right: var(--at-gutter);
  }
}
/* Titre = display/h1 (relevé : 48/56, 600, -2%) ; mobile réduit comme le hero article. */
.at-page-hero__title {
  margin: 0;
  font-size: 32px;
  line-height: 40px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--at-primary-900);
}

@media (min-width: 64rem) {
  .at-page-hero__title {
    font-size: 48px;
    line-height: 56px;
  }
}
/* Accroche = text/xl (relevé : 20/28, 400). */
.at-page-hero__accroche {
  margin: 0;
  max-width: 640px;
  font-size: 20px;
  line-height: 28px;
  font-weight: 400;
  color: var(--at-primary-900);
}

/* --- Carte « Nous contacter » : l'habillage sombre (flex, gap 16, padding 28/24, radius 16,
   fond primary-900, texte blanc) est MUTUALISÉ avec .at-partez-assure (règles partagées plus haut).
   Le label .at-sidehead__label hérite du blanc (color:inherit) et le filet reste cyan par défaut.
   Ici uniquement les éléments propres au contact + le titre en 700 (relevé de cette carte). --- */
.at-contact-card__title {
  margin: 0;
  font-size: 18px;
  line-height: 26px;
  font-weight: 700; /* display/h5-Bold (relevé) — diffère volontairement de Partez assuré (500) */
  color: #fff;
}

.at-contact-card__tel {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700; /* text/md-bold (relevé) */
  color: #fff;
  text-decoration: none;
}

.at-contact-card__tel:hover {
  text-decoration: underline;
}

.at-contact-card__hours {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: #fff; /* text/sm blanc (relevé) */
}

/* ============================================================================
   Formulaires — primitive générique .at-form + surcouche spécifique Contact Form 7 (.at-cf7).
   .at-form porte TOUT le générique (champs, grille 2 colonnes, labels caps, focus, actions) et est
   réutilisée par le formulaire Contact (CF7, markup class="at-form at-cf7") ET par le formulaire
   Renonciation (plugin assur-renonciation, markup .at-form). Le bouton = .at-btn--primary. Seules
   restent sous .at-cf7 les règles réellement spécifiques à CF7 (wrap, spinner, états .wpcf7-*, sortie
   de réponse). Valeurs dérivées des tokens + relevé VISUEL de la maquette Contact.
   ============================================================================ */
/* Primitive de formulaire AUTONOME (réutilisée par Contact/CF7 ET Renonciation) : le rythme interne
   est piloté ICI (flex gap). --at-form-gap = seule valeur de rythme (rangées verticales + colonnes). */
.at-form {
  --at-form-gap: 24px;
  display: flex;
  flex-direction: column;
  gap: var(--at-form-gap);
}

/* [CF7] Neutralisation des marges/<br> parasites d'auto-formatage (wpcf7_autop). Le markup CF7 porte
   class="at-form at-cf7" ; ces règles ne visent QUE la surcouche CF7. */
.at-cf7 p {
  margin: 0;
}

.at-cf7 br {
  display: none;
}

/* Rangée à 2 colonnes → 1 colonne en mobile. */
.at-form__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--at-form-gap);
}

@media (min-width: 40rem) {
  .at-form__cols {
    grid-template-columns: 1fr 1fr;
  }
  /* Champ demi-largeur seul sur sa ligne : largeur = 1 colonne de .at-form__cols (moitié moins la
     moitié du gap) → bord droit aligné sur la colonne de gauche. Pleine largeur en mobile. */
  .at-form__field--half {
    width: calc(50% - var(--at-form-gap) / 2);
  }
}
/* Champ = label caps au-dessus du contrôle. */
.at-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.at-form__field > label {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--at-primary-900);
}

.at-form__req {
  color: var(--at-primary-800);
}

/* [CF7] Le wrap CF7 occupe toute la largeur (les inputs Renonciation sont enfants directs du champ). */
.at-cf7 .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* Contrôles de saisie (hors submit/checkbox, ciblés par type — incl. date pour Renonciation). */
.at-form input[type=text],
.at-form input[type=tel],
.at-form input[type=email],
.at-form input[type=date],
.at-form select,
.at-form textarea {
  width: 100%;
  border: 1px solid var(--at-border-subtle);
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  color: var(--at-gray-900);
}

.at-form input[type=text],
.at-form input[type=tel],
.at-form input[type=email],
.at-form input[type=date],
.at-form select {
  height: 52px;
  padding: 0 16px;
}

.at-form textarea {
  min-height: 160px;
  padding: 12px 16px;
  resize: vertical;
}

.at-form ::placeholder {
  color: #8a97a3;
}

/* Select : chevron custom (navy). */
.at-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2312678c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

/* Focus : bord cyan + halo léger. */
.at-form input[type=text]:focus,
.at-form input[type=tel]:focus,
.at-form input[type=email]:focus,
.at-form input[type=date]:focus,
.at-form select:focus,
.at-form textarea:focus {
  outline: none;
  border-color: var(--at-primary-800);
  box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.15);
}

/* État d'erreur local d'un champ (bordure rouge) — piloté par aria-invalid côté serveur. */
.at-form [aria-invalid=true] {
  border-color: #b3261e;
}

/* Rangée d'actions : bouton(s) alignés à droite (le bouton = .at-btn--primary). */
.at-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin: 0;
  flex-wrap: wrap;
}

/* Deux boutons (ex. « Modifier » à gauche / action finale à droite). */
.at-form__actions--split {
  justify-content: space-between;
}

/* CF7 insère un <span class="wpcf7-spinner"> après le submit ; son gabarit par défaut (margin 0 24px
   + 24px, visibility:hidden mais occupe la place) décalait le bouton vers la gauche du bord droit.
   Neutralisé UNIQUEMENT dans .at-cf7 → le bouton s'aligne à ras du bord droit du formulaire/textarea.
   Aucun autre formulaire du site n'a .at-cf7. */
.at-cf7 .wpcf7-spinner {
  display: none;
}

/* États CF7 (scopés). */
.at-cf7 .wpcf7-not-valid {
  border-color: #b3261e;
}

.at-cf7 .wpcf7-not-valid-tip {
  margin-top: 4px;
  font-size: 13px;
  line-height: 18px;
  color: #b3261e;
}

/* Sortie de réponse (succès/erreur) : sœur adjacente de .at-cf7 dans le <form>. */
.at-cf7 + .wpcf7-response-output {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 20px;
}

/* ============================================================================
   Renonciation — extras de formulaire (parcours 2 étapes). Réutilise .at-form + .at-btn + tokens.
   Le métier vit dans le plugin assur-renonciation ; ici uniquement l'habillage (design dans le thème).
   ============================================================================ */
.at-renonciation {
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* Marge visuelle quand view.js scrolle vers le composant → le début n'est pas collé tout en haut.
     Token space/30 (24px). */
  scroll-margin-top: var(--wp--preset--spacing--30, 1.5rem);
}

/* Honeypot anti-spam : présent dans le DOM mais masqué visuellement. */
.at-form__hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Indicateur d'étapes sobre (1. Vos informations / 2. Vérification et confirmation). */
.at-form-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.at-form-steps__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--at-gray-900);
  opacity: 0.55;
}

.at-form-steps__item.is-current,
.at-form-steps__item.is-done {
  opacity: 1;
  color: var(--at-primary-900);
  font-weight: 500;
}

.at-form-steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--at-border-subtle);
  color: var(--at-primary-900);
  font-size: 12px;
  font-weight: 700;
}

.at-form-steps__item.is-current .at-form-steps__num {
  background: var(--at-primary-800);
  color: #fff;
}

/* Encadré « note » — PRIMITIVE PARTAGÉE avec le bloc at-encart (« Bon à savoir »). Même langage visuel
   (fond, filet gauche 4px, radius, paddings, hiérarchie titre/contenu, mêmes tokens). Variante --error
   pour les états d'erreur. `.at-encart` est CO-SÉLECTEUR → son markup ne change pas et ses styles
   structurels viennent désormais d'ici (valeurs identiques → aucune régression sur les encarts). */
.at-note,
.at-encart {
  --at-note-accent: var(--at-primary-800);
  --at-note-bg: var(--at-surface-blue-50);
  --at-note-title: var(--at-primary-900);
  display: flex;
  gap: 16px;
  padding: 20px 24px;
  border-inline-start: 4px solid var(--at-note-accent);
  border-radius: 16px;
  background: var(--at-note-bg);
}

.at-note__icon,
.at-encart__icon {
  flex: 0 0 auto;
  line-height: 0;
  color: var(--at-note-title);
}

.at-note__icon svg,
.at-encart__icon svg {
  width: 25px;
  height: 25px;
}

.at-note__body,
.at-encart__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.at-note__title,
.at-encart__title {
  margin: 0;
  font-size: 18px;
  line-height: 26px;
  font-weight: 500;
  color: var(--at-note-title);
}

.at-note__content,
.at-encart__content {
  font-size: 14px;
  line-height: 20px;
  color: var(--at-gray-900);
}

.at-note__content > :first-child,
.at-encart__content > :first-child {
  margin-top: 0;
}

.at-note__content > :last-child,
.at-encart__content > :last-child {
  margin-bottom: 0;
}

.at-note__content ul {
  margin: 0;
  padding-left: 20px;
}

/* Variante ERREUR (synthèse d'erreurs du formulaire) : mêmes structure/tokens, palette rouge. */
.at-note--error {
  --at-note-accent: #b3261e;
  --at-note-bg: #fff3f3;
  --at-note-title: #8a1f1f;
}

/* Case de confirmation (étape 2). */
.at-form__check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 20px;
  color: var(--at-gray-900);
}

.at-form__check input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

/* Texte juridique récapitulatif : lisible, sauts de ligne conservés. */
.at-form__recap {
  border: 1px solid var(--at-border-subtle);
  background: var(--at-gray-50);
  border-radius: 8px;
  padding: 20px 24px;
  font-size: 16px;
  line-height: 26px;
  color: var(--at-gray-900);
  white-space: pre-line;
}

/* La synthèse d'erreurs et l'écran de succès Renonciation utilisent désormais la primitive .at-note
   ci-dessus (variante --error pour les erreurs, défaut info/bleu pour le succès). */
/* Placeholder éditeur du bloc. */
.at-renonciation-placeholder {
  margin: 0;
  padding: 16px;
  border: 1px dashed var(--at-border-subtle);
  border-radius: 12px;
  color: var(--at-primary-600);
}

/* ============================================================================
   Carte « Auteur des articles » — composant GLOBAL (fin d'article, avant « Articles similaires »).
   Coquille sombre horizontale (image + contenu) qui COMPOSE des primitives existantes : .at-sidehead
   (label « Auteur » + filet cyan), .at-btn--primary (bouton). Empilement propre en mobile. Tokens :
   primary-900 (fond), blanc, border-subtle (texte secondaire), radius 16. Px à caler au relevé Figma.
   ============================================================================ */
.at-author-card {
  display: flex;
  flex-direction: column; /* mobile : image en haut, contenu dessous */
  overflow: hidden;
  border-radius: 16px;
  background: var(--at-primary-900);
  color: #fff;
  margin-block-start: var(--wp--preset--spacing--40, 2.5rem); /* respiration après le contenu de l'article */
}

.at-author-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10; /* hauteur maîtrisée */
  overflow: hidden;
}

.at-author-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.at-author-card__body {
  display: flex;
  flex-direction: column;
  gap: 24px; /* Figma « Frame 598 » : bloc texte ↔ bouton (radius/24) */
  padding: 24px; /* mobile : marge intérieure uniforme */
}

/* Bloc texte : label, filet, nom, description espacés uniformément (Figma « Frame », gap 6). */
.at-author-card__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Dans cette carte, le filet colle au label (6px) comme dans Figma. Override LOCAL :
   .at-sidehead conserve son gap 16 partout ailleurs (sidebar, cartes). */
.at-author-card .at-sidehead {
  gap: 6px;
}

.at-author-card__name {
  margin: 0;
  font-size: 18px; /* display/h5 */
  line-height: 26px;
  font-weight: 500;
  color: #fff;
}

.at-author-card__desc {
  margin: 0;
  font-size: 14px; /* text/sm */
  line-height: 20px;
  color: #fff; /* neutral/gray/0 (Figma) */
}

.at-author-card__cta {
  align-self: flex-start;
}

@media (min-width: 64rem) {
  .at-author-card {
    flex-direction: row; /* desktop : image à gauche, contenu à droite */
    gap: 24px; /* image ↔ contenu (radius/24) */
    padding-right: 24px; /* marge droite de la carte ; image à fleur des bords gauche/haut/bas */
  }
  .at-author-card__media {
    flex: 0 0 200px; /* colonne image fixe 200px (Figma) */
    width: 200px;
    aspect-ratio: auto; /* s'étire à la hauteur du contenu (align-items:stretch) */
  }
  .at-author-card__body {
    padding: 24px 0; /* haut/bas 24 ; gauche = gap carte, droite = padding-right carte */
  }
}
.at-produits__fam-title {
  margin: 0 0 var(--wp--preset--spacing--30, 1.5rem);
}

.at-produits--archive .at-produits__fam-title {
  text-align: center;
  margin: 0 0 24px;
}

.at-produits--archive.at-produits--sections .at-produits__panel + .at-produits__panel {
  margin-top: 40px;
}

@media (min-width: 64rem) {
  .at-produits--archive.at-produits--sections .at-produits__panel + .at-produits__panel {
    margin-top: 64px;
  }
}
.at-produits__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 340px));
  justify-content: center;
  gap: 24px;
}

.at-produits--sections .at-produits__panel + .at-produits__panel {
  margin-top: var(--wp--preset--spacing--50, 4rem);
}

.at-produits__tabs {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 20px;
  margin-bottom: var(--wp--preset--spacing--40, 2.5rem);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.at-produits__tabs::-webkit-scrollbar {
  display: none;
}

.at-produits__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 48px;
  max-width: 18rem;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--at-gray-600, #6c7a89);
  background: none;
  color: var(--at-gray-600, #6c7a89);
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  white-space: normal;
  cursor: pointer;
}

.at-produits__tab[aria-selected=true] {
  color: var(--at-primary-900, #12678c);
  border-bottom: 3px solid var(--at-primary-900, #12678c);
}

.at-produits__tab-icon,
.at-produits__tab-caret {
  display: inline-flex;
  flex: 0 0 auto;
}

.at-produits__tab-icon {
  width: 20px;
  height: 20px;
}

.at-produits__tab-icon svg,
.at-produits__tab-icon img {
  display: block;
  width: 100%;
  height: 100%;
}

.at-produits__tab-icon svg {
  fill: currentColor;
}

.at-produits__tab-icon svg [fill]:not([fill=none]) {
  fill: currentColor;
}

.at-produits__tab-icon svg [stroke]:not([stroke=none]) {
  stroke: currentColor;
}

.at-produits__tab-caret {
  width: 14px;
  height: 14px;
}

.at-produits__tab-caret svg {
  width: 100%;
  height: 100%;
  transform: rotate(90deg);
}

@media (min-width: 64rem) {
  .at-produits__tabs {
    justify-content: safe center;
    margin-bottom: 3rem;
  }
}
.at-produits--onglets .at-produits__grid {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--at-hcarousel-gap, 20px);
  margin: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.at-produits--onglets .at-produits__grid > * {
  flex: 0 0 min(340px, 85%);
  scroll-snap-align: start;
}

@media (min-width: 64rem) {
  .at-produits--onglets .at-produits__panel:not([hidden]) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
  }
  .at-produits--onglets .at-produits__grid {
    display: contents;
  }
}
.at-dest-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 296px;
  padding: 8px;
  border-radius: 16px;
  overflow: hidden;
  background: #e6ebf2;
  color: #12678c;
}

.at-dest-card__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.at-dest-card__img--empty {
  background: #e6ebf2;
}

.at-dest-card__link {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}

.at-dest-card__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 16px;
  border-radius: 12px;
  background: #f7f9fb;
}

.at-dest-card__id {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.at-dest-card__plane {
  display: inline-flex;
}

.at-dest-card__plane svg {
  display: block;
  width: auto;
  height: 23px;
}

.at-dest-card__iso {
  font-size: 50px;
  line-height: 44px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #12678c;
}

.at-dest-card__name {
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #12678c;
}

.at-dest-card__sep {
  width: 100%;
  margin-top: auto;
  border-top: 1px dashed #12678c;
}

.at-dest-card__arrow {
  font-size: 20px;
  line-height: 28px;
  color: #12678c;
}

.at-dest-card__title {
  margin: 0;
  text-align: center;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  color: #12678c;
}

.at-dest-card__links {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.at-dest-card__links li + li {
  border-top: 1px dashed rgba(18, 103, 140, 0.35);
  padding-top: 4px;
}

.at-dest-card__pagelink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 2px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: #12678c;
  text-decoration: none;
}

.at-dest-card__pagelink:hover {
  color: var(--at-primary-800, #00b4d8);
}

.at-dest-archive__zone {
  margin-block-start: 40px;
}

@media (min-width: 64rem) {
  .at-dest-archive__zone {
    margin-block-start: 64px;
  }
}
.at-dest-archive__zone:first-child {
  margin-block-start: 0;
}

.at-dest-archive .at-section-header {
  margin-bottom: 24px;
}

.at-dest-archive__subhead {
  margin: 24px 0 12px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--at-primary-900, #12678c);
}

.at-dest-archive__grid,
.at-produits--archive.at-produits--sections .at-produits__grid {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: stretch;
  gap: 24px;
}

@media (min-width: 40rem) {
  .at-dest-archive__grid,
  .at-produits--archive.at-produits--sections .at-produits__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 64rem) {
  .at-dest-archive__grid,
  .at-produits--archive.at-produits--sections .at-produits__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.at-produits--archive .at-produit-card {
  max-width: none;
}

.at-404 {
  padding-block: 64px;
}

@media (min-width: 64rem) {
  .at-404 {
    padding-block: 96px;
  }
}
.at-404__inner {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}

.at-404__code {
  margin: 0 0 8px;
  font-size: clamp(64px, 12vw, 120px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--at-primary-800, #00b4d8);
}

.at-404__title {
  margin: 0 0 12px;
  font-size: clamp(1.75rem, 4vw, 40px);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--at-primary-900, #12678c);
}

.at-404__text {
  margin: 0 0 28px;
  font-size: 18px;
  line-height: 28px;
  color: var(--at-gray-600, #6c7a89);
}

.at-404__actions {
  margin: 0;
  display: flex;
  justify-content: center;
}