/* ============================================================
   AVENUE BELMONT — HOMEPAGE
   ============================================================ */

/* ══════════════════════════════════════════
   HERO
══════════════════════════════════════════ */
.ab-hero {
  position: relative;
  /* #ab-content a un padding-top de 80px (hauteur du header fixe) : sans en
     tenir compte, 85vh laissait toujours une bande de la section suivante
     visible en bas d'écran (ligne de flottaison "coupée"). En soustrayant
     ces 80px, le hero occupe exactement l'écran restant, pile jusqu'au bord. */
  height: calc(100vh - 80px);
  min-height: 520px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #000;
}

@keyframes ab-kenburns {
  0%   { transform: scale(1)    translateX(0); }
  100% { transform: scale(1.08) translateX(-2%); }
}

.ab-hero__bg {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: 400px center;
  background-repeat: no-repeat;
  animation: ab-kenburns 14s ease-in-out infinite alternate;
}

.ab-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.55) 40%, rgba(0,0,0,0.0) 75%);
}

.ab-hero__content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
}

.ab-hero__reassurance-bar {
  position: relative;
  z-index: 1;
  padding-bottom: var(--space-16);
}

.ab-hero__text {
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.ab-hero__title {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
}

.ab-hero__title-line {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-white);
}

/* Ligne 1 — fine, italique, légèrement transparente */
.ab-hero__title-line--light {
  font-weight: 300;
  font-style: italic;
  opacity: 0.75;
  text-transform: none;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
}

/* Ligne 2 — forte, majuscules */
.ab-hero__title-line--strong {
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2rem, 4vw, 3.25rem);
}

.ab-hero__ctas {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* ── Boutons communs ── */
/* Les boutons (.btn, --primary, --secondary, --tertiary, --ghost) sont désormais
   dans assets/css/components/buttons.css (composant partagé). */

/* ── Ticker mobile ── */
.ab-hero__ticker {
  display: none;
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
}

@keyframes ab-ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-33.333%); }
}

.ab-hero__ticker-track {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  animation: ab-ticker 18s linear infinite;
}

.ab-hero__ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding-inline: 0.75rem;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
}

.ab-hero__ticker-sep {
  color: rgba(255,255,255,0.35);
  font-size: 14px;
  flex-shrink: 0;
}

/* ── Triptyque sous les CTAs ──
   Liste sémantique (<ul>/<li>) : 3 points liés entre eux, plus lisible
   pour les lecteurs d'écran et les moteurs que 3 <div> isolées. */
.ab-hero__reassurance-grid {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ab-hero__reassurance-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-inline: 0 clamp(var(--space-5), 2.5vw, var(--space-8));
  color: rgba(255,255,255,0.9);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  transition: color 0.2s ease;
  outline: none;
}
.ab-hero__reassurance-item:hover,
.ab-hero__reassurance-item:focus-within {
  color: var(--color-white);
}
.ab-hero__reassurance-item:focus-visible {
  outline: 1px solid rgba(255,255,255,0.5);
  outline-offset: 6px;
  border-radius: 2px;
}

.ab-hero__reassurance-item:not(:first-of-type) {
  padding-inline: clamp(var(--space-5), 2.5vw, var(--space-8));
}

/* Séparateur en pseudo-élément (remplace l'ancienne <div> décorative) :
   purement visuel, hors du DOM, donc invisible pour l'arborescence
   d'accessibilité et les moteurs — pas de contenu parasite entre les <li>. */
.ab-hero__reassurance-item:not(:first-of-type)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,0.25);
}

.ab-hero__reassurance-icon {
  color: rgba(255,255,255,0.6);
  flex-shrink: 0;
  transition: color 0.2s ease;
}
.ab-hero__reassurance-item:hover .ab-hero__reassurance-icon,
.ab-hero__reassurance-item:focus-within .ab-hero__reassurance-icon {
  color: var(--color-white);
}

/* Volet au survol : explique concrètement comment la promesse est tenue,
   avec un appel à l'action vers la page correspondante. */
/* .ab-hero__reassurance-panel-wrap est le vrai déclencheur hoverable : sa
   padding-bottom comble physiquement l'espace entre le point et le volet,
   pour que la souris ne quitte jamais un descendant de l'item en chemin
   (sinon :hover retombe avant d'atteindre le volet). Le volet visuel
   (fond blanc, ombre) est l'élément .ab-hero__reassurance-panel à
   l'intérieur, qui n'a lui aucune raison de créer un espace mort. */
.ab-hero__reassurance-panel-wrap {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-bottom: var(--space-4);
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s;
  z-index: 20;
}
.ab-hero__reassurance-item:hover .ab-hero__reassurance-panel-wrap,
.ab-hero__reassurance-item:focus-within .ab-hero__reassurance-panel-wrap {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Verre dépoli : gris translucide + flou de l'arrière-plan (image du hero),
   sans fond opaque. Seul le CTA à l'intérieur est cliquable, le reste du
   volet ne fait que rester survolable pour ne pas couper le hover. */
.ab-hero__reassurance-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 260px;
  background: rgba(35, 35, 35, 0.68);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.16);
  color: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
  transform: translateY(6px);
  transition: transform 0.25s ease;
  pointer-events: none;
}
.ab-hero__reassurance-item:hover .ab-hero__reassurance-panel,
.ab-hero__reassurance-item:focus-within .ab-hero__reassurance-panel {
  transform: translateY(0);
}
.ab-hero__reassurance-panel-text {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.6;
  font-weight: 300;
  color: rgba(255,255,255,0.78);
}
.ab-hero__reassurance-panel-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-white);
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
  width: fit-content;
}
.ab-hero__reassurance-panel-cta .arrow { transition: transform 0.25s ease; }
.ab-hero__reassurance-panel-cta:hover .arrow,
.ab-hero__reassurance-panel-cta:focus-visible .arrow { transform: translateX(3px); }
.ab-hero__reassurance-panel-cta:hover,
.ab-hero__reassurance-panel-cta:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* Le premier et le dernier point sont proches des bords du hero : on
   évite que leur volet ne déborde hors de l'écran. */
.ab-hero__reassurance-item:first-of-type .ab-hero__reassurance-panel-wrap { left: 0; transform: none; }
.ab-hero__reassurance-item:last-of-type .ab-hero__reassurance-panel-wrap { left: auto; right: 0; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ab-hero__reassurance-panel-wrap { transition: opacity 0.15s ease, visibility 0.15s; }
  .ab-hero__reassurance-panel { transition: none; }
}

/* ══════════════════════════════════════════
   NOUVEAUTÉS
══════════════════════════════════════════ */
.ab-nouveautes {
  background: var(--color-white);
  text-align: center;
}

.ab-nouveautes__title {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: var(--weight-medium);
  color: var(--color-black);
  text-align: center;
  margin-bottom: clamp(var(--space-10), 5vw, var(--space-16));
  letter-spacing: var(--tracking-normal);
}

.ab-nouveautes__grid {
  display: flex;
  justify-content: center;
  gap: 15rem;
}

.ab-nouveautes__grid .ab-product-card {
  width: 340px;
  flex-shrink: 0;
}

/* La carte produit (.ab-product-card) est désormais dans
   assets/css/components/product-card.css (composant partagé home + shop). */


/* ══════════════════════════════════════════
   SÉCURITÉ
══════════════════════════════════════════ */
.ab-security {
  overflow: hidden;
}

.ab-security__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 55vh;
}

/* Image gauche */
.ab-security__image {
  overflow: hidden;
  position: relative;
  height: 55vh;
}

.ab-security__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Contenu droite */
@keyframes ab-gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.ab-security__content {
  background: linear-gradient(135deg, #C7C7C7, #f0f0f0, #C7C7C7, #b8b8b8);
  background-size: 300% 300%;
  animation: ab-gradient-shift 6s ease infinite;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(var(--space-12), 8vw, var(--space-24)) clamp(var(--space-10), 6vw, var(--space-20));
}

.ab-security__content-inner {
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ab-security__title { color: var(--color-primary); }
.ab-security__text  { font-weight: 600; }


/* ══════════════════════════════════════════
   SECTION VENDRE
══════════════════════════════════════════ */
.ab-sell {
  background: #fff;
  padding: clamp(56px, 8vw, 120px) clamp(20px, 5vw, 80px);
}

.ab-sell__inner {
  max-width: 1320px;
  margin-inline: auto;
}

.ab-sell__header {
  text-align: center;
  margin-bottom: clamp(30px, 5.5vw, 80px);
}

.ab-sell__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(26px, 5vw, 40px);
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--color-black);
}

.ab-sell__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 24px);
  list-style: none;
}

/* Carte */
.ab-card {
  position: relative;
  padding: clamp(28px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  min-height: 440px;
  border-radius: 6px;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.5s ease;
  overflow: hidden;
}

.ab-card--light {
  background: #fff;
  color: #150E08;
  border: 1px solid #ECECEC;
}

.ab-card--dark {
  background: #51161F;
  color: #fff;
  border: 1px solid #51161F;
}

/* Halo lumineux sur carte sombre */
.ab-card--dark::before {
  content: '';
  position: absolute;
  top: -40%; right: -20%;
  width: 70%; height: 140%;
  background: radial-gradient(ellipse at center,
              rgba(255,255,255,0.10) 0%,
              rgba(255,255,255,0.04) 35%,
              transparent 70%);
  filter: blur(30px);
  pointer-events: none;
  opacity: 0.85;
  transition: opacity 0.6s ease, transform 0.6s ease;
  z-index: 1;
}
.ab-card--dark:hover::before {
  opacity: 1;
  transform: translateX(-4%) translateY(2%);
}

.ab-card:hover { transform: translateY(-4px); }
.ab-card--light:hover {
  box-shadow: 0 18px 44px -22px rgba(20,14,8,0.18);
  border-color: #DDD;
}
.ab-card--dark:hover {
  box-shadow: 0 24px 56px -20px rgba(81,22,31,0.45);
}

.ab-card__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(24px, 3.4vw, 40px);
  letter-spacing: -0.005em;
  line-height: 1.15;
  margin-bottom: clamp(20px, 3vw, 36px);
  position: relative;
  z-index: 2;
  color: inherit;
}

.ab-card__benefits {
  list-style: none;
  margin-bottom: clamp(24px, 3.5vw, 40px);
  position: relative;
  z-index: 2;
  padding: 0;
}

.ab-card__benefits li {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.1vw, 15px);
  font-weight: 300;
  line-height: 1.6;
  padding: 12px 0;
  border-bottom: 1px solid rgba(20,14,8,0.07);
  display: flex;
  align-items: center;
  gap: 14px;
  color: inherit;
}
.ab-card--dark .ab-card__benefits li {
  border-bottom-color: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
}
.ab-card__benefits li:last-child { border-bottom: none; }

.ab-card__benefits li::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #51161F;
  flex-shrink: 0;
}
.ab-card--dark .ab-card__benefits li::before { background: #fff; }

/* CTA */
.ab-card__cta {
  align-self: flex-start;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 22px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  border-radius: 3px;
  border: 1px solid;
  transition: background 0.35s ease, color 0.35s ease,
              transform 0.35s ease, box-shadow 0.35s ease,
              border-color 0.35s ease;
  position: relative;
  z-index: 2;
  line-height: 1.2;
}

.ab-card--light .ab-card__cta {
  background: #51161F;
  color: #fff;
  border-color: #51161F;
}
.ab-card--light .ab-card__cta:hover {
  background: #290B0B;
  border-color: #290B0B;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -8px rgba(81,22,31,0.5);
}

.ab-card--dark .ab-card__cta {
  background: rgba(255,255,255,0.10);
  color: #fff;
  border-color: rgba(255,255,255,0.28);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18),
              inset 0 -1px 0 rgba(255,255,255,0.04),
              0 4px 14px -6px rgba(0,0,0,0.3);
}
.ab-card--dark .ab-card__cta:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.45);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25),
              0 10px 22px -8px rgba(0,0,0,0.4);
}

.ab-card__cta-arrow {
  transition: transform 0.35s ease;
  display: inline-block;
}
.ab-card__cta:hover .ab-card__cta-arrow { transform: translateX(3px); }

@media (max-width: 720px) {
  .ab-sell__grid { grid-template-columns: 1fr; }
  .ab-card { min-height: auto; }
  .ab-card__cta { width: 100%; align-self: stretch; justify-content: center; }
}

/* ══════════════════════════════════════════
   SECTION GARANTIE
══════════════════════════════════════════ */
/* La section garantie est dans components/garantie.css (partagé home + archives). */

/* ══════════════════════════════════════════
   NEWSLETTER
══════════════════════════════════════════ */
.nl-section {
  width: 100%;
  padding: 100px 60px;
  background: var(--color-white);
}

.nl-inner {
  max-width: 1320px;
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

/* Titre animé */
.nl-content {
  flex: 0 1 auto;
  max-width: 560px;
}

.nl-content h2 {
  font-family: var(--font-heading);
  font-size: 38px;
  font-weight: 700;
  color: var(--color-primary-mid);
  line-height: 1.15;
  margin-bottom: 20px;
  letter-spacing: -0.01em;
}

.nl-content h2 .nl-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  margin-right: 0.25em;
}

.nl-content h2 .nl-word span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s cubic-bezier(0.76, 0, 0.24, 1);
}

.nl-section.visible .nl-content h2 .nl-word span {
  transform: translateY(0);
}

.nl-content p {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  color: #1a1a1a;
  line-height: 1.5;
  max-width: 480px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease 0.6s, transform 1s cubic-bezier(0.76, 0, 0.24, 1) 0.6s;
}

.nl-section.visible .nl-content p {
  opacity: 0.85;
  transform: translateY(0);
}

/* Formulaire */
.nl-form {
  flex: 0 1 auto;
  width: 100%;
  max-width: 460px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease 0.9s, transform 1s cubic-bezier(0.76, 0, 0.24, 1) 0.9s;
}

.nl-section.visible .nl-form {
  opacity: 1;
  transform: translateY(0);
}

.nl-field {
  position: relative;
  margin-bottom: 28px;
}

.nl-field::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 1px;
  background: rgba(26,26,26,0.25);
}

.nl-field::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 1px;
  background: #1a1a1a;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
  z-index: 1;
}

.nl-field:focus-within::before { transform: scaleX(1); }

.nl-field input {
  width: 100%;
  padding: 16px 0 10px;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  color: #1a1a1a;
  outline: none;
  position: relative;
  z-index: 2;
}

.nl-field input::placeholder { color: transparent; }

.nl-field label {
  position: absolute;
  top: 16px; left: 0;
  font-size: 15px;
  font-weight: 300;
  color: rgba(26,26,26,0.5);
  pointer-events: none;
  transition: all 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}

.nl-field input:focus + label,
.nl-field input:not(:placeholder-shown) + label {
  top: -8px;
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #1a1a1a;
  font-weight: 400;
}

/* Bouton */
.nl-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px;
  background: var(--color-primary-mid);
  border: 1px solid var(--color-primary-mid);
  border-radius: 3px;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}

.nl-submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  transform: translateY(101%);
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
  z-index: 0;
}

.nl-btn-text {
  position: relative;
  z-index: 1;
  color: #fff;
  transition: color 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}

.nl-submit:hover::before { transform: translateY(0); }
.nl-submit:hover .nl-btn-text { color: #000; }
.nl-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* Messages */
.nl-message {
  margin-top: 22px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  min-height: 20px;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.nl-message.visible { opacity: 1; }
.nl-message.success { color: #2a6b3d; }
.nl-message.error   { color: #8b2a2a; }

@media (max-width: 900px) {
  .nl-section { padding: 70px 32px; }
  .nl-inner { flex-direction: column; align-items: flex-start; gap: 48px; }
  .nl-content, .nl-form { max-width: 100%; width: 100%; }
  .nl-content h2 { font-size: 30px; }
}

@media (max-width: 600px) {
  .nl-section { padding: 50px 20px; }
  .nl-content h2 { font-size: 26px; }
  .nl-submit { width: 100%; }
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */

/* ── Tablette (≤ 768px) ── */
@media (max-width: 768px) {

  /* Hero */
  .ab-hero { height: 85vh; }
  .ab-hero__bg {
    background-size: cover;
    background-position: center center;
  }
  .ab-hero__overlay { background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.65) 100%); }
  .ab-hero__content { justify-content: center; }
  .ab-hero__text { align-items: center; text-align: center; }
  .ab-hero__ctas { justify-content: center; gap: var(--space-3); }

  /* Triptyque : masqué, remplacé par le ticker */
  .ab-hero__reassurance-desktop { display: none; }
  .ab-hero__ticker { display: block; }

  /* Sécurité */
  .ab-security__inner { grid-template-columns: 1fr; }
  .ab-security__image { height: 300px; }
  .ab-security__content { padding: var(--space-8) var(--space-8); }
  .ab-security__content-inner { gap: var(--space-4); }
}

/* ── Mobile iPhone (≤ 480px) ── */
@media (max-width: 480px) {

  /* Hero */
  .ab-hero { height: 100svh; }
  .ab-hero__title { font-size: 26px; }
  .ab-hero__ctas { flex-direction: row; flex-wrap: nowrap; gap: var(--space-3); }
  .ab-hero__reassurance-bar { padding-bottom: var(--space-8); }

  /* Nouveautés */
  .ab-nouveautes__grid {
    flex-direction: column;
    align-items: center;
    gap: var(--space-12);
  }
  .ab-nouveautes__grid .ab-product-card {
    width: 100%;
    max-width: 320px;
  }
  .btn--primary { padding: 10px 40px; }

  /* Sécurité */
  .ab-security__image { height: 240px; }
  .ab-security__content { padding: var(--space-8) var(--space-6); }
  .ab-security__content-inner { gap: var(--space-4); }
}