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

body {
  margin: 0;
  font-family: var(--font-body, serif);
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b1);
  color: var(--color-text);
  background-color: var(--color-bg);
}

img { max-width: 100%; height: auto; }
a   { color: inherit; text-decoration: none; }

/* ----------------------------------------
   Boutons
---------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2) var(--spacing-6);
  font-family: var(--font-body);
  font-size: var(--font-size-b1);
  font-weight: var(--font-weight-b1);
  line-height: var(--line-height-b1);
  text-decoration: none;
  cursor: pointer;
  border: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-primary {
  background-color: var(--color-grey-700);
  color: var(--color-yellow-50);
  border: 1px solid transparent;
}

.btn-primary:hover {
  background-color: var(--color-grey-50);
  color: var(--color-grey-700);
  border-color: var(--color-grey-700);
}

.btn-secondary {
  background-color: var(--color-light-00);
  color: var(--color-yellow-800);
  border: 1px solid var(--color-yellow-800);
}

.btn-secondary:hover {
  background-color: var(--color-yellow-800);
  color: var(--color-light-00);
}

.btn-white {
  background-color: var(--color-light-00);
  color: var(--color-grey-800);
}

.btn-white:hover {
  background-color: var(--color-grey-700);
  color: var(--color-light-00);
}

.btn-white-stroke {
  background-color: transparent;
  color: var(--color-light-00);
  border: 1px solid var(--color-light-00);
}

.btn-white-stroke:hover {
  background-color: var(--color-grey-50);
  color: var(--color-grey-800);
  border-color: var(--color-grey-800);
}

/* ----------------------------------------
   Header
---------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background-color: var(--color-light-00);
  transition: box-shadow 0.3s ease;
}

.site-header.scrolled {
  box-shadow: 0 1px 0 var(--color-grey-50);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-2) var(--spacing-6);
}

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

.header-logo img {
  display: block;
  width: 55px;
  height: 50px;
  object-fit: contain;
}

.header-menu {
  display: flex;
  align-items: center;
  gap: var(--spacing-7);
}

.header-nav {
  display: flex;
  gap: var(--spacing-6);
}

.header-nav .nav-link {
  font-family: var(--font-body);
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b1);
  color: var(--color-grey-800);
  text-decoration: none;
  white-space: nowrap;
}

.header-nav .nav-link:hover {
  color: var(--color-yellow-800);
}

.header-nav .nav-link.active {
  color: var(--color-yellow-800);
}

/* ----------------------------------------
   Footer
---------------------------------------- */
.site-footer {
  position: relative;
  background-color: var(--color-light-50);
  border-top: 1px solid var(--color-grey-50);
  padding-top: var(--spacing-15);
  padding-bottom: var(--spacing-6);
  overflow: hidden;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-6);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-15);
}

.footer-group {
  display: flex;
  gap: var(--spacing-6);
  align-items: flex-start;
}

.footer-col {
  flex: 1 0 0;
  min-width: 0;
}

/* Colonne logo */
.footer-col--logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.footer-col--logo img {
  display: block;
  width: 181px;
  height: auto;
}

/* Label de colonne (Liens utiles, etc.) */
.footer-col-label {
  font-family: var(--font-body);
  font-size: var(--font-size-b2);
  line-height: var(--line-height-b2);
  color: var(--color-grey-400);
  margin: 0;
}

/* Colonne liens utiles */
.footer-col--links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.footer-col--links nav {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.footer-col--links nav a {
  font-family: var(--font-body);
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b1);
  color: var(--color-grey-600);
  text-decoration: none;
  white-space: nowrap;
}

.footer-col--links nav a:hover {
  color: var(--color-yellow-800);
}

/* Colonne services */
.footer-col--services {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.footer-col--services nav {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.footer-col--services nav a {
  font-family: var(--font-body);
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b1);
  color: var(--color-grey-600);
  text-decoration: none;
}

.footer-col--services nav a:hover {
  color: var(--color-yellow-800);
}

/* Colonne horaires */
.footer-col--hours {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.footer-col--hours p {
  font-family: var(--font-body);
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b1);
  color: var(--color-grey-600);
  margin: 0;
}

.footer-col--hours p:first-child {
  font-size: var(--font-size-b2);
  line-height: var(--line-height-b2);
  color: var(--color-grey-400);
}

/* Bloc mentions légales + crédit */
.footer-legal-container {
  display: flex;
  align-items: flex-end;
}

.footer-legal {
  flex: 1 0 0;
  font-family: var(--font-body);
  font-size: var(--font-size-b2);
  line-height: var(--line-height-b2);
  color: var(--color-grey-600);
  margin: 0;
  text-align: center;
}

.footer-legal a {
  color: var(--color-grey-600);
  text-decoration: underline;
}

.footer-legal a:hover {
  color: var(--color-yellow-800);
}

/* ----------------------------------------
   Variables locales — alias sémantiques formulaire
---------------------------------------- */
:root {
  /* Astérisque champ obligatoire → red-400 */
  --color-required: var(--color-red-400);
}

/* ----------------------------------------
   Accessibilité — lecteur d'écran uniquement
---------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------
   Bouton — variante pleine largeur
---------------------------------------- */
.btn--full {
  width: 100%;
}

/* ----------------------------------------
   Champs de formulaire — composant Input
---------------------------------------- */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-0);
  width: 100%;
}

.form-field label {
  font-family: var(--font-body);
  font-size: var(--font-size-b2);
  font-weight: var(--font-weight-b2);
  line-height: var(--line-height-b2);
  color: var(--color-grey-700);
  white-space: nowrap;
}

.required-star {
  color: var(--color-required);
  margin-left: 1px;
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 10px;
  font-family: var(--font-body);
  font-size: var(--font-size-b2);
  line-height: var(--line-height-b2);
  color: var(--color-grey-700);
  background-color: var(--color-light-00);
  border: 1px solid var(--color-yellow-400);
  border-radius: 0;
  outline: none;
  appearance: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--color-grey-300);
}

.form-field input:hover,
.form-field textarea:hover {
  background-color: var(--color-yellow-50);
}

.form-field input:focus,
.form-field textarea:focus {
  background-color: var(--color-yellow-50);
  border-color: var(--color-yellow-600);
}

/* État erreur */
.form-field--error input,
.form-field--error textarea {
  border-color: var(--color-red-100);
  background-color: var(--color-light-00);
}

.form-field--error input:focus,
.form-field--error textarea:focus {
  border-color: var(--color-red-100);
  background-color: var(--color-light-00);
}

.form-field__error-msg {
  font-family: var(--font-body);
  font-size: var(--font-size-b2);
  line-height: var(--line-height-b2);
  color: var(--color-red-300);
  margin: 0;
  white-space: nowrap;
}

.form-field--textarea textarea {
  resize: vertical;
  min-height: 215px;
}

/* Messages d'erreur / succès formulaire */
.form-errors {
  list-style: none;
  padding: var(--spacing-4);
  margin: 0 0 var(--spacing-4);
  background-color: #fff0ee;
  border-left: 3px solid var(--color-required);
  font-family: var(--font-body);
  font-size: var(--font-size-b2);
  color: var(--color-required);
}

.form-errors li + li {
  margin-top: var(--spacing-1);
}

.form-success {
  padding: var(--spacing-4);
  background-color: #f0fff4;
  border-left: 3px solid #2d7d46;
  font-family: var(--font-body);
  font-size: var(--font-size-b1);
  color: #1a4d2c;
}

.form-success p { margin: 0; }

/* ----------------------------------------
   Page Contact
---------------------------------------- */
.contact-section {
  padding: 80px var(--spacing-6);
  display: flex;
  justify-content: center;
  overflow: hidden;
  width: 100%;
}

.contact-content {
  display: flex;
  gap: var(--spacing-7);
  align-items: flex-start;
  max-width: 1200px;
  width: 100%;
}

/* Colonne gauche */
.contact-left {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  flex-shrink: 0;
  width: 595px;
  background-color: var(--color-light-50);
  padding: var(--spacing-6);
}

.contact-desc {
  font-family: var(--font-body);
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b1);
  color: var(--color-grey-800);
  margin: 0;
}

.contact-info-item {
  display: flex;
  gap: 10px;
  align-items: center;
}

.contact-info-item img {
  flex-shrink: 0;
}

.contact-info-item p {
  font-family: var(--font-body);
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b1);
  color: var(--color-grey-800);
  margin: 0;
}

/* Colonne droite */
.contact-right {
  flex: 1 0 0;
  min-width: 0;
}

#contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

/* ----------------------------------------
   Page Contact — Responsive mobile
---------------------------------------- */
@media (max-width: 900px) {
  .contact-section {
    padding: var(--spacing-8) var(--spacing-6);
  }

  .contact-content {
    flex-direction: column;
    gap: var(--spacing-6);
  }

  .contact-left,
  .contact-right {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .contact-section {
    padding: var(--spacing-7) var(--spacing-4);
  }

  .form-field input,
  .form-field textarea {
    font-size: var(--font-size-b1);
    min-height: 48px;
  }

  .form-field--textarea textarea {
    min-height: 160px;
  }
}

/* ----------------------------------------
   Header — Burger + drawer mobile
---------------------------------------- */
.header-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.header-burger {
  display: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  align-items: center;
}

.header-burger img {
  display: block;
  width: 24px;
  height: 24px;
}

/* Overlay */
.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 150;
}

.mobile-nav-overlay.is-open {
  display: block;
}

/* Drawer */
.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 280px;
  background-color: var(--color-light-00);
  z-index: 200;
  display: flex;
  flex-direction: column;
  padding: var(--spacing-6);
  gap: var(--spacing-6);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.mobile-nav.is-open {
  transform: translateX(0);
}

.mobile-nav-close {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  align-self: flex-end;
}

.mobile-nav-close img {
  display: block;
  width: 24px;
  height: 24px;
}

.mobile-nav-link {
  font-family: var(--font-body);
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b1);
  color: var(--color-grey-800);
  text-decoration: none;
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
  color: var(--color-yellow-800);
}

/* ----------------------------------------
   Header — Responsive mobile
---------------------------------------- */
@media (max-width: 900px) {
  .header-nav {
    display: none;
  }

  .header-menu {
    gap: 0;
  }

  .header-burger {
    display: flex;
  }
}

@media (max-width: 480px) {
  .header-inner {
    padding: var(--spacing-2) var(--spacing-4);
  }

  .btn-primary {
    font-size: var(--font-size-b2);
    padding: var(--spacing-2) var(--spacing-4);
  }
}

/* ----------------------------------------
   Footer — Responsive mobile
---------------------------------------- */
@media (max-width: 900px) {
  .footer-group {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-8);
  }

  .footer-col--logo {
    width: 100%;
  }

  .footer-col--links,
  .footer-col--services,
  .footer-col--hours {
    width: 100%;
  }

  .footer-col--links nav a,
  .footer-col--services nav a {
    white-space: normal;
  }

  .footer-inner {
    gap: var(--spacing-8);
  }
}

@media (max-width: 480px) {
  .site-footer {
    padding-top: var(--spacing-8);
  }
}

/* ----------------------------------------
   Page Services — Hub
---------------------------------------- */

/* Conteneur principal : py-80px, gap-42px entre blocs */
.services-hub {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 80px top = spacing-10 (56) + spacing-6 (24) */
  padding: calc(var(--spacing-10) + var(--spacing-6)) 0 var(--spacing-10);
  /* 42px gap = spacing-8 (40) + spacing-0 (2) */
  gap: calc(var(--spacing-8) + var(--spacing-0));
  overflow: hidden;
  width: 100%;
}

/* En-tête centré */
.services-hub__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  max-width: 1200px;
  padding: 0 var(--spacing-6);
}

.services-hub__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-h1);
  line-height: var(--line-height-h1);
  color: var(--color-grey-800);
  margin: 0;
  white-space: nowrap;
}

.services-hub__intro {
  font-family: var(--font-body);
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b1);
  color: var(--color-grey-800);
  max-width: 650px;
  margin: 0;
}

/* ----------------------------------------
   Grille : 6 rangées de services
---------------------------------------- */
.services-hub__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 72px gap = spacing-9 (48) + spacing-6 (24) */
  gap: calc(var(--spacing-9) + var(--spacing-6));
  width: 100%;
  overflow: hidden;
}

/* ----------------------------------------
   Rangée service : texte + images
---------------------------------------- */
.service-row {
  display: flex;
  gap: var(--spacing-6);
  align-items: center;
  width: 1200px;
}

/* Variante inversée : images à gauche */
.service-row--reverse .service-row__images {
  order: -1;
}

/* Colonne texte */
.service-row__content {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding: var(--spacing-6) 0;
}

.service-row__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-h3);
  line-height: var(--line-height-h3);
  color: var(--color-grey-800);
  margin: 0;
}

.service-row__desc {
  font-family: var(--font-body);
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b1);
  color: var(--color-grey-800);
  margin: 0;
}

/* Bouton : colle à son contenu (flex-column étire par défaut) */
.service-row__content .btn {
  align-self: flex-start;
}

/* ----------------------------------------
   Colonne images (double, avec parallax)
---------------------------------------- */
.service-row__images {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  height: 344px;
  overflow: hidden;
}

/* Chaque image est un conteneur absolument positionné avec overflow:hidden */
.service-img {
  position: absolute;
  overflow: hidden;
}

.service-img--primary {
  width: 365px;
  height: 303px;
}

.service-img--secondary {
  width: 295px;
  height: 215px;
}

/* Images droite (rangées normales) : primaire en haut-droite, secondaire en bas-gauche */
.service-row:not(.service-row--reverse) .service-img--primary {
  right: 0;
  top: 0;
}

.service-row:not(.service-row--reverse) .service-img--secondary {
  left: 0;
  top: 90px;
}

/* Images gauche (rangées inversées) : primaire en haut-gauche, secondaire en centre-droite */
.service-row--reverse .service-img--primary {
  left: 0;
  top: 0;
}

.service-row--reverse .service-img--secondary {
  right: 0;
  top: 80px;
}

/* Image : remplit son conteneur */
.service-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Le conteneur lui-même est déplacé par le JS (will-change ici, pas sur l'img) */
.service-img {
  will-change: transform;
}

/* ----------------------------------------
   Section FAQ Services
---------------------------------------- */
.services-faq {
  /* 56px = spacing-10 */
  padding: var(--spacing-10) 0;
  width: 100%;
}

.services-faq__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-6);
}

.services-faq__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-h2);
  line-height: var(--line-height-h2);
  color: var(--color-grey-800);
  margin: 0;
  text-align: center;
}

/* Override max-width de la faq-list pour la page services */
.services-faq .faq-list {
  max-width: 700px;
  width: 100%;
}

/* Séparateur entre items FAQ */
.services-faq .faq-item {
  border-bottom: 1px solid var(--color-light-300);
}

.services-faq .faq-item:last-child {
  border-bottom: none;
}

/* ----------------------------------------
   Services Hub — Responsive
---------------------------------------- */

/* Tablette large (≤1200px) : fluidifier, adapter les images */
@media (max-width: 1200px) {
  .services-hub__title {
    white-space: normal;
  }

  .service-row {
    width: 100%;
    padding: 0 var(--spacing-6);
  }

  .service-row__images {
    height: 300px;
  }

  .service-img--primary {
    width: 310px;
    height: 260px;
  }

  .service-img--secondary {
    width: 250px;
    height: 185px;
  }

  .service-row:not(.service-row--reverse) .service-img--secondary {
    top: 75px;
  }

  .service-row--reverse .service-img--secondary {
    top: 65px;
  }
}

/* Tablette (≤900px) */
@media (max-width: 900px) {
  .services-hub {
    padding: var(--spacing-8) 0 var(--spacing-8);
    gap: var(--spacing-7);
  }

  .services-hub__title {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
  }

  .services-hub__intro {
    max-width: 100%;
  }

  .services-hub__grid {
    gap: var(--spacing-8);
  }
}

/* Mobile (≤768px) : empiler texte + images, duo d'images côte-à-côte décalé */
@media (max-width: 768px) {
  .service-row,
  .service-row--reverse {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-4);
    padding: 0 var(--spacing-6);
  }

  /* Images toujours au-dessus du texte */
  .service-row .service-row__images,
  .service-row--reverse .service-row__images {
    order: -1;
    width: 100%;
    height: 260px;
    flex: none;
  }

  /* Primaire : côté gauche, occupe ~60% de la largeur, hauteur presque pleine */
  .service-row:not(.service-row--reverse) .service-img--primary,
  .service-row--reverse .service-img--primary {
    width: 60%;
    height: 215px;
    top: 0;
    left: 0;
    right: auto;
  }

  /* Secondaire : côté droit, plus petite, décalée vers le bas — toujours visible */
  .service-row:not(.service-row--reverse) .service-img--secondary,
  .service-row--reverse .service-img--secondary {
    display: block;
    width: 46%;
    height: 175px;
    top: 70px;
    right: 0;
    left: auto;
  }

  .service-row__content {
    padding: 0 0 var(--spacing-6);
  }

  .service-row__title {
    font-size: var(--font-size-h4);
    line-height: var(--line-height-h4);
  }
}

/* Petit mobile (≤480px) */
@media (max-width: 480px) {
  .services-hub__header,
  .service-row,
  .service-row--reverse {
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
  }

  .service-row .service-row__images,
  .service-row--reverse .service-row__images {
    height: 230px;
  }

  .service-row:not(.service-row--reverse) .service-img--primary,
  .service-row--reverse .service-img--primary {
    width: 62%;
    height: 190px;
  }

  .service-row:not(.service-row--reverse) .service-img--secondary,
  .service-row--reverse .service-img--secondary {
    width: 44%;
    height: 155px;
    top: 65px;
  }
}

/* ========================================
   Page Accueil — utilitaires communs
======================================== */

/* Conteneur centré 1200px */
.section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-6);
}

/* En-tête de section : titre + description centrés */
.section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  width: 100%;
  padding: 10px;
}

/* Titre H2 générique de section */
.section-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-h2);
  line-height: var(--line-height-h2);
  color: var(--color-grey-800);
  margin: 0;
  text-align: center;
}

.section-title--left {
  text-align: left;
}

/* Description de section */
.section-desc {
  font-family: var(--font-body);
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b1);
  color: var(--color-grey-800);
  max-width: 650px;
  margin: 0;
}

/* ========================================
   Page Accueil — Hero
======================================== */
.hero-section {
  position: relative;
  min-height: 699px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 var(--spacing-6) var(--spacing-7);
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-bg__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
}

.hero-bg__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(1, 3, 1, 0) 62%, #010301 88%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 650px;
  text-align: center;
}

.hero-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-h1);
  line-height: var(--line-height-h1);
  color: var(--color-light-00);
  margin: 0;
  white-space: nowrap;
}

.hero-desc {
  font-family: var(--font-body);
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b1);
  color: var(--color-light-00);
  margin: 0;
}

.hero-ctas {
  display: flex;
  gap: var(--spacing-6);
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

/* Le bouton maps est masqué sur desktop */
.hero-cta--mobile {
  display: none;
}

/* ========================================
   Page Accueil — Section Réparation / Carrousel
======================================== */
.repair-section {
  padding: var(--spacing-10) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-6);
  overflow: hidden;
}

/* Carrousel infini */
@keyframes carousel-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--carousel-translate, -50%)); }
}

.carousel-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: var(--spacing-3) 0;
}

.carousel-track {
  display: flex;
  gap: 0;
  align-items: center;
  width: max-content;
  will-change: transform;
  animation: carousel-scroll 40s linear infinite;
}

.carousel-track img {
  height: 70px;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
  margin-right: var(--spacing-10);
}

/* Masques dégradés gauche/droite */
.carousel-fade {
  position: absolute;
  top: 0;
  height: 100%;
  width: 80px;
  pointer-events: none;
  z-index: 2;
}

.carousel-fade--left {
  left: 0;
  background: linear-gradient(to right, var(--color-light-00), transparent);
}

.carousel-fade--right {
  right: 0;
  background: linear-gradient(to left, var(--color-light-00), transparent);
}

/* ========================================
   Page Accueil — Product Card
======================================== */
.product-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  flex-shrink: 0;
}

.product-card__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.product-card__img-wrapper {
  width: 250px;
  height: 300px;
  background-color: var(--color-grey-200);
  overflow: hidden;
  flex-shrink: 0;
}

.product-card__img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-card__info {
  background-color: var(--color-light-00);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  padding: var(--spacing-2);
  width: 250px;
}

.product-card__title {
  font-family: var(--font-body);
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b1);
  color: var(--color-grey-800);
  margin: 0;
  overflow-wrap: break-word;
}

.product-card__year {
  display: flex;
  gap: var(--spacing-1);
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--font-size-b2);
  line-height: var(--line-height-b2);
  margin: 0;
}

.product-card__year-label {
  color: var(--color-grey-600);
}

.product-card__year-value {
  color: var(--color-grey-800);
}

.product-card__price {
  font-family: var(--font-body);
  font-size: var(--font-size-b2);
  line-height: var(--line-height-b2);
  color: var(--color-grey-600);
  margin: 0;
}

/* ========================================
   Page Accueil — Montres du moment
======================================== */
.watches-section {
  padding: var(--spacing-10) 0;
}

.watches-grid {
  display: flex;
  gap: var(--spacing-7);
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}

/* ========================================
   Page Accueil — Services (index)
======================================== */
.services-index-section {
  padding: calc(var(--spacing-9) + var(--spacing-6)) 0 var(--spacing-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  width: 100%;
}

.services-index-grid {
  margin-top: var(--spacing-9); /* 48px après le titre */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--spacing-9) + var(--spacing-6));
  width: 100%;
  overflow: hidden;
}

.service-link {
  font-family: var(--font-body);
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b1);
  color: var(--color-text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.service-link:hover {
  color: var(--color-yellow-800);
}

.services-index-cta {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-4); /* 16px après le grid */
}

/* ========================================
   Page Accueil — Avis clients
======================================== */
.testimonials-section {
  padding: calc(var(--spacing-10) + var(--spacing-6)) 0 var(--spacing-10);
}

.testimonials-rating {
  display: block;
  width: 185px;
  height: 60px;
  flex-shrink: 0;
}

.testimonials-grid {
  display: flex;
  gap: var(--spacing-6);
  align-items: stretch;
  width: 100%;
  flex-wrap: wrap;
}

.testimonial-card {
  flex: 1 0 0;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding: var(--spacing-6);
  background-color: var(--color-light-00);
  border: 1px solid var(--color-light-300);
}

.testimonial-stars {
  font-size: 20px;
  color: var(--color-star);
  line-height: 1;
  letter-spacing: 2px;
}

.testimonial-author {
  font-family: var(--font-body);
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b1);
  color: var(--color-grey-800);
  margin: 0;
}

.testimonial-text {
  font-family: var(--font-body);
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b1);
  color: var(--color-grey-800);
  margin: 0;
}

/* ========================================
   Page Accueil — Localisation
======================================== */
.location-section {
  padding: var(--spacing-10) 0;
}

.location-info {
  display: flex;
  gap: var(--spacing-6);
  align-items: center;
  width: 100%;
}

.location-text {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.location-img {
  flex: 1 0 0;
  min-width: 0;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

.location-map {
  width: 100%;
}

.location-map__iframe {
  display: block;
  width: 100%;
  height: 350px;
  border: 0;
}

/* ========================================
   Page Accueil — Responsive
======================================== */
@media (max-width: 900px) {
  .hero-title {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
    white-space: normal;
  }

  .hero-section {
    min-height: 90vh;
    align-items: flex-end;
    padding-bottom: var(--spacing-9);
  }

  .hero-desc {
    text-align: left;
  }

  /* Sur mobile : swap des CTAs — maps remplace montres */
  .hero-cta--desktop {
    display: none;
  }

  .hero-cta--mobile {
    display: inline-flex;
  }

  /* CTAs pleine largeur sur mobile (comme sur le screenshot) */
  .hero-ctas {
    flex-direction: column;
    width: 100%;
  }

  .hero-ctas .btn {
    width: 100%;
    justify-content: center;
  }

  .hero-bg__gradient {
    background: linear-gradient(180deg, rgba(1, 3, 1, 0) 25%, rgba(1, 3, 1, 0.75) 58%, #010301 82%);
  }

  .watches-grid {
    gap: var(--spacing-6);
  }

  .testimonials-grid {
    gap: var(--spacing-4);
  }

  .testimonial-card {
    flex-basis: calc(50% - var(--spacing-2));
    min-width: 0;
  }

  .carousel-fade {
    width: 48px;
  }

  /* Textes longs : alignés à gauche sur mobile */
  .section-desc,
  .testimonial-text {
    text-align: left;
  }

  .location-info {
    flex-direction: column;
    gap: var(--spacing-6);
  }

  .location-img {
    width: 100%;
    order: -1;
  }

}

@media (max-width: 480px) {
  .hero-section {
    min-height: 85svh;
    padding: 0 var(--spacing-4) var(--spacing-6);
  }

  .carousel-fade {
    width: 32px;
  }

  .section-inner {
    padding: 0 var(--spacing-4);
  }

  .watches-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-4) var(--spacing-3);
  }

  .watches-grid .product-card,
  .watches-grid .product-card__link {
    width: 100%;
    align-items: stretch;
  }

  .watches-grid .product-card__img-wrapper,
  .watches-grid .product-card__info {
    width: 100%;
  }

  .watches-grid .product-card__img-wrapper {
    height: auto;
    aspect-ratio: 3 / 4;
  }

  .testimonial-card {
    flex-basis: 100%;
    min-width: 0;
  }
}

/* ========================================
   Page Accueil — FAQ
======================================== */
.faq-section {
  padding: var(--spacing-10) 0;
}

.faq-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 700px;
}

.faq-item {
  padding: var(--spacing-2) 0;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-6);
  width: 100%;
  background: none;
  border: none;
  padding: var(--spacing-2) 0;
  cursor: pointer;
  text-align: left;
}

.faq-question span {
  font-family: var(--font-heading);
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-h6);
  line-height: var(--line-height-h6);
  color: var(--color-grey-800);
}

.faq-question span {
  transition: color 0.2s ease;
}

.faq-question:hover span,
.faq-question:focus-visible span {
  color: var(--color-grey-600);
}

.faq-question:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: var(--spacing-1);
  border-radius: 2px;
}

.faq-caret {
  flex-shrink: 0;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item--open .faq-caret {
  transform: rotate(180deg);
}

.faq-answer {
  height: 0;
  overflow: hidden;
  transition: height 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-answer p {
  font-family: var(--font-body);
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b1);
  color: var(--color-grey-800);
  margin: 0;
  padding-bottom: var(--spacing-4);
  opacity: 0;
  transform: translateY(calc(-1 * var(--spacing-2)));
  transition:
    opacity 0.3s ease 0.08s,
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.04s;
}

.faq-item--open .faq-answer p {
  opacity: 1;
  transform: translateY(0);
}

.faq-separator {
  border: none;
  border-top: 1px solid var(--color-light-300);
  margin: 0;
  transition: opacity 0.3s ease;
}

@media (max-width: 900px) {
  .faq-list {
    max-width: 100%;
  }
}


/* ========================================
   Page Montres du moment
======================================== */
.montres-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px var(--spacing-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-7);
}

.montres-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-4);
  text-align: center;
  width: 100%;
}

.montres-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-h1);
  line-height: var(--line-height-h1);
  color: var(--color-grey-800);
  margin: 0;
  max-width: 666px;
}

.montres-desc {
  font-family: var(--font-body);
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b1);
  color: var(--color-grey-800);
  max-width: 650px;
  margin: 0;
}

/* Empty state — partagé entre montres.php et index.php */
.watches-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  background-color: var(--color-light-200);
  padding: var(--spacing-6) var(--spacing-9);
}

.watches-empty__title {
  font-family: var(--font-body);
  font-size: var(--font-size-b1);
  font-weight: var(--font-weight-b1);
  line-height: var(--line-height-b1);
  color: var(--color-grey-700);
  margin: 0;
}

.watches-empty__desc {
  font-family: var(--font-body);
  font-size: var(--font-size-b2);
  font-weight: var(--font-weight-b2);
  line-height: var(--line-height-b2);
  color: var(--color-grey-700);
  text-align: center;
  max-width: 352px;
  margin: 0;
}

.montres-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8) var(--spacing-5);
  justify-content: center;
  width: 100%;
}

/* Responsive — Montres */
@media (max-width: 900px) {
  .montres-section {
    padding: var(--spacing-10) var(--spacing-6);
    gap: var(--spacing-6);
  }

  .montres-title {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
  }
}

@media (max-width: 480px) {
  .montres-section {
    padding: var(--spacing-8) var(--spacing-4);
  }

  .montres-title {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
  }

  .montres-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-4) var(--spacing-3);
  }

  .montres-grid .product-card,
  .montres-grid .product-card__link {
    width: 100%;
    align-items: stretch;
  }

  .montres-grid .product-card__img-wrapper,
  .montres-grid .product-card__info {
    width: 100%;
  }

  .montres-grid .product-card__img-wrapper {
    height: auto;
    aspect-ratio: 3 / 4;
  }
}

/* ========================================
   Page À propos
======================================== */

/* Wrapper principal */
.apropos-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  width: 100%;
  padding-bottom: 70px;
}

/* Bande fond clair (rangées 1 et 2) — 72px = spacing-9 (48) + spacing-6 (24) */
.apropos-band {
  background-color: var(--color-light-50);
  width: 100%;
  padding: calc(var(--spacing-9) + var(--spacing-6)) 0;
  display: flex;
  justify-content: center;
}

.apropos-band__inner {
  max-width: 1200px;
  width: 100%;
  padding: 0 var(--spacing-6);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-7);
}

/* Rangée : 2 colonnes */
.apropos-row {
  display: flex;
  gap: var(--spacing-6);
  align-items: flex-start;
  width: 100%;
}

/* Colonne texte */
.apropos-col {
  flex: 1 0 0;
  min-width: 0;
  padding: var(--spacing-6);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.apropos-col__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-h5);
  line-height: var(--line-height-h5);
  color: var(--color-grey-800);
  margin: 0;
}

.apropos-col__text {
  font-family: var(--font-body);
  font-size: var(--font-size-b1);
  font-weight: var(--font-weight-b1);
  line-height: var(--line-height-b1);
  color: var(--color-grey-800);
  margin: 0;
}

/* Colonne image (rangée 2) */
.apropos-img-wrapper {
  flex: 1 0 0;
  min-width: 0;
  height: 264px;
  overflow: hidden;
  background-color: var(--color-grey-100);
}

.apropos-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Section carte */
.apropos-map-section {
  max-width: 1200px;
  width: 100%;
  padding: 0 var(--spacing-6);
  margin-top: calc(var(--spacing-9) + var(--spacing-6));
}

.apropos-map__iframe {
  display: block;
  width: 100%;
  height: 304px;
  border: 0;
}

/* ========================================
   Page À propos — Responsive
======================================== */
@media (max-width: 900px) {
  .apropos-band {
    padding: var(--spacing-8) 0;
  }

  .apropos-row {
    flex-direction: column;
    gap: 0;
  }

  /* Image toujours au-dessus du texte sur mobile */
  .apropos-row--media .apropos-img-wrapper {
    order: -1;
    height: 260px;
    flex: none;
    width: 100%;
  }

  .apropos-map-section {
    margin-top: var(--spacing-8);
  }
}

@media (max-width: 480px) {
  .apropos-band {
    padding: var(--spacing-7) 0;
  }

  .apropos-band__inner {
    padding: 0 var(--spacing-4);
  }

  .apropos-col {
    padding: var(--spacing-4) var(--spacing-4) var(--spacing-4) 0;
  }

  .apropos-col__title {
    font-size: var(--font-size-h6);
    line-height: var(--line-height-h6);
  }

  .apropos-img-wrapper {
    height: 220px;
  }

  .apropos-map-section {
    margin-top: var(--spacing-7);
    padding: 0 var(--spacing-4);
  }

  .apropos-map__iframe {
    height: 240px;
  }

  .apropos-main {
    padding-bottom: var(--spacing-8);
  }
}

/* ========================================
   Hero bannière partagée (blog + article)
======================================== */
.page-hero {
  position: relative;
  height: 227px;
  display: flex;
  align-items: flex-end;
  padding-bottom: var(--spacing-7);
  overflow: hidden;
}

.page-hero--center {
  justify-content: center;
}

.page-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.page-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
}

.page-hero__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.10) 0%,
    rgba(0, 0, 0, 0)    10%,
    rgba(0, 0, 0, 0)    70%,
    rgba(0, 0, 0, 0.83) 100%
  );
}

.page-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  padding: 0 var(--spacing-6);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.page-hero--center .page-hero__inner {
  align-items: center;
}

.page-hero--center .page-hero__title {
  text-align: center;
}

.page-hero__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-h1);
  line-height: var(--line-height-h1);
  color: var(--color-light-00);
  margin: 0;
}

.page-hero__breadcrumbs {
  display: flex;
  gap: var(--spacing-2);
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--font-body);
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b1);
  color: var(--color-light-00);
}

.page-hero__breadcrumbs a {
  color: var(--color-light-00);
  text-decoration: none;
}

.page-hero__breadcrumbs a:hover {
  text-decoration: underline;
}

.page-hero__breadcrumbs-sep {
  opacity: 0.7;
}

/* ========================================
   Blog — Listing nouvelle version
======================================== */
.blog-listing {
  padding: 72px 0;
}

.blog-listing__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-6);
}

.blog-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-6);
  width: 100%;
}

.blog-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding: var(--spacing-6);
  background-color: var(--color-light-50);
  border: 1px solid var(--color-light-100);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease;
}

.blog-card:hover {
  border-color: var(--color-grey-300);
}

.blog-card__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-h5);
  line-height: var(--line-height-h5);
  color: var(--color-grey-800);
  margin: 0;
}

.blog-card__excerpt {
  font-family: var(--font-body);
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b1);
  color: var(--color-grey-800);
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b1);
  color: var(--color-grey-600);
  white-space: nowrap;
  margin-top: auto;
}

/* ========================================
   Article — Layout avec sidebar
======================================== */
.article-content-section {
  padding: 72px 0;
}

.article-layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-6);
  display: flex;
  gap: var(--spacing-6);
  align-items: flex-start;
}

.article-layout__main {
  width: 800px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.article-meta-bar {
  display: flex;
  gap: 40px;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b1);
  color: var(--color-grey-700);
  background-color: var(--color-light-50);
  padding: var(--spacing-2) var(--spacing-4);
  align-self: flex-start;
}

.article-layout__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-h3);
  line-height: var(--line-height-h3);
  color: var(--color-grey-800);
  margin: 0;
}

.article-layout__excerpt {
  font-family: var(--font-body);
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b1);
  color: var(--color-grey-800);
  margin: 0;
}

.article-layout__sidebar {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding: var(--spacing-6);
  background-color: var(--color-light-50);
  border: 1px solid var(--color-light-200);
  position: sticky;
  top: 80px;
}

.article-sidebar__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-h6);
  line-height: var(--line-height-h6);
  color: var(--color-grey-800);
  margin: 0;
}

.article-sidebar__text {
  font-family: var(--font-body);
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b1);
  color: var(--color-grey-800);
  margin: 0;
}

/* ========================================
   Page hero + Blog listing + Article — Responsive
======================================== */
@media (max-width: 1200px) {
  .article-layout__main {
    width: auto;
    flex: 1 0 0;
  }
}

@media (max-width: 900px) {
  .page-hero {
    height: 180px;
  }

  .page-hero__title {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
    text-align: center;
  }

  .blog-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .article-layout {
    flex-direction: column;
  }

  .article-layout__main {
    width: 100%;
  }

  .article-layout__sidebar {
    position: static;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .page-hero {
    height: 160px;
    padding-bottom: var(--spacing-6);
  }

  .page-hero__title {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
  }

  .page-hero__inner {
    padding: 0 var(--spacing-4);
  }

  .blog-listing {
    padding: var(--spacing-8) 0;
  }

  .blog-listing__inner {
    padding: 0 var(--spacing-4);
  }

  .blog-card-grid {
    grid-template-columns: 1fr;
  }

  .article-content-section {
    padding: var(--spacing-8) 0;
  }

  .article-layout {
    padding: 0 var(--spacing-4);
  }

  .article-layout__title {
    font-size: var(--font-size-h4);
    line-height: var(--line-height-h4);
  }
}

/* ========================================
   Blog — Page listing
======================================== */
.blog-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px var(--spacing-6);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-10);
}

.blog-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-3);
  text-align: center;
}

.blog-label {
  font-family: var(--font-body);
  font-size: var(--font-size-b3);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
}

.blog-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-h1);
  line-height: var(--line-height-h1);
  color: var(--color-grey-800);
  margin: 0;
}

/* Filtres catégories */
.blog-filters {
  display: flex;
  gap: var(--spacing-2);
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.blog-filter {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-1-5) var(--spacing-5);
  font-family: var(--font-body);
  font-size: var(--font-size-b2);
  color: var(--color-grey-700);
  border: 1px solid var(--color-light-500);
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.blog-filter:hover,
.blog-filter.active {
  background-color: var(--color-grey-800);
  color: var(--color-yellow-200);
  border-color: var(--color-grey-800);
}

/* Article en vedette */
.blog-featured {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background-color: var(--color-light-100);
}

.blog-featured__img-wrapper {
  flex: 1 0 0;
  min-height: 420px;
  overflow: hidden;
}

.blog-featured__img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.blog-featured:hover .blog-featured__img-wrapper img {
  transform: scale(1.04);
}

.blog-featured__img-placeholder {
  width: 100%;
  height: 100%;
  background-color: var(--color-grey-100);
}

.blog-featured__content {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-5);
  padding: var(--spacing-10) var(--spacing-9);
}

.blog-featured__badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--font-size-b3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  padding-left: var(--spacing-3);
  border-left: 3px solid var(--color-accent);
}

.blog-featured__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-h2);
  line-height: var(--line-height-h2);
  color: var(--color-grey-800);
  margin: 0;
}

.blog-featured__title a {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s ease;
}

.blog-featured__title a:hover {
  color: var(--color-yellow-800);
}

.blog-featured__excerpt {
  font-family: var(--font-body);
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b1);
  color: var(--color-grey-600);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-featured__meta {
  display: flex;
  gap: var(--spacing-3);
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--font-size-b2);
  color: var(--color-grey-500);
}

.blog-featured__meta-sep {
  color: var(--color-accent);
}

/* Grille articles */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-8) var(--spacing-6);
}

.article-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}

.article-card__img-wrapper {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-color: var(--color-grey-100);
}

.article-card__img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}

.article-card:hover .article-card__img-wrapper img {
  transform: scale(1.06);
}

.article-card__img-placeholder {
  width: 100%;
  height: 100%;
  background-color: var(--color-grey-200);
}

.article-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding: var(--spacing-4) 0 0;
  border-top: 2px solid var(--color-light-400);
  transition: border-color 0.2s ease;
}

.article-card:hover .article-card__body {
  border-top-color: var(--color-accent);
}

.article-card__category {
  font-family: var(--font-body);
  font-size: var(--font-size-b3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin: 0;
}

.article-card__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-h5);
  line-height: var(--line-height-h5);
  color: var(--color-grey-800);
  margin: 0;
  transition: color 0.2s ease;
}

.article-card:hover .article-card__title {
  color: var(--color-yellow-800);
}

.article-card__excerpt {
  font-family: var(--font-body);
  font-size: var(--font-size-b2);
  line-height: var(--line-height-b2);
  color: var(--color-grey-600);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-card__meta {
  font-family: var(--font-body);
  font-size: var(--font-size-b3);
  color: var(--color-grey-400);
  margin: 0;
  padding-top: var(--spacing-1);
}

/* Empty state */
.blog-empty {
  text-align: center;
  padding: var(--spacing-10) 0;
  font-family: var(--font-body);
  font-size: var(--font-size-b1);
  color: var(--color-grey-500);
}

/* Pagination */
.blog-pagination {
  display: flex;
  gap: var(--spacing-2);
  align-items: center;
  justify-content: center;
}

.blog-pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-family: var(--font-body);
  font-size: var(--font-size-b1);
  color: var(--color-grey-700);
  border: 1px solid var(--color-light-500);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.blog-pagination__btn:hover,
.blog-pagination__btn.active {
  background-color: var(--color-grey-800);
  color: var(--color-yellow-200);
  border-color: var(--color-grey-800);
}

.blog-pagination__ellipsis {
  font-family: var(--font-body);
  font-size: var(--font-size-b1);
  color: var(--color-grey-400);
  padding: 0 var(--spacing-1);
}

/* ----------------------------------------
   Blog — Responsive listing
---------------------------------------- */
@media (max-width: 1200px) {
  .blog-featured__content {
    padding: var(--spacing-8) var(--spacing-7);
  }
}

@media (max-width: 900px) {
  .blog-section {
    padding: var(--spacing-10) var(--spacing-6);
    gap: var(--spacing-8);
  }

  .blog-title {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
  }

  .blog-featured {
    flex-direction: column;
  }

  .blog-featured__img-wrapper {
    flex: none;
    height: 300px;
    min-height: 0;
  }

  .blog-featured__content {
    padding: var(--spacing-6);
    gap: var(--spacing-4);
  }

  .blog-featured__title {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
  }

  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-6);
  }
}

@media (max-width: 480px) {
  .blog-section {
    padding: var(--spacing-8) var(--spacing-4);
    gap: var(--spacing-7);
  }

  .blog-title {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
  }

  .blog-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-6);
  }

  .blog-featured__img-wrapper {
    height: 240px;
  }
}

/* ========================================
   Article — Page unique
======================================== */
.article-hero {
  width: 100%;
  aspect-ratio: 16 / 6;
  overflow: hidden;
  background-color: var(--color-grey-100);
}

.article-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.article-hero--placeholder {
  background-color: var(--color-grey-200);
}

.article-main {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--spacing-9) var(--spacing-6) var(--spacing-10);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-7);
}

/* Breadcrumb */
.article-breadcrumb {
  display: flex;
  gap: var(--spacing-2);
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--font-size-b2);
  color: var(--color-grey-500);
  flex-wrap: wrap;
}

.article-breadcrumb a {
  color: var(--color-grey-600);
  text-decoration: underline;
}

.article-breadcrumb a:hover {
  color: var(--color-yellow-800);
}

.article-breadcrumb__sep {
  color: var(--color-light-600);
  font-size: var(--font-size-b3);
}

/* En-tête article */
.article-header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding-bottom: var(--spacing-6);
  border-bottom: 1px solid var(--color-light-400);
}

.article-category {
  font-family: var(--font-body);
  font-size: var(--font-size-b3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  padding-left: var(--spacing-3);
  border-left: 3px solid var(--color-accent);
  margin: 0;
}

.article-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-h1);
  line-height: var(--line-height-h1);
  color: var(--color-grey-800);
  margin: 0;
}

.article-excerpt {
  font-family: var(--font-body);
  font-size: var(--font-size-h6);
  line-height: var(--line-height-h6);
  color: var(--color-grey-600);
  margin: 0;
}

.article-meta {
  display: flex;
  gap: var(--spacing-4);
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--font-size-b2);
  color: var(--color-grey-500);
  flex-wrap: wrap;
}

.article-meta__sep {
  color: var(--color-accent);
}

/* ========================================
   Page Mentions légales
======================================== */
.legal-section {
  padding: var(--spacing-15) var(--spacing-6);
}

.legal-content {
  max-width: 800px;
  margin: 0 auto;
}

.legal-content h1 {
  font-family: var(--font-heading);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-h2);
  line-height: var(--line-height-h2);
  color: var(--color-grey-800);
  margin: 0 0 var(--spacing-9);
}

@media (max-width: 900px) {
  .legal-section {
    padding: var(--spacing-10) var(--spacing-6);
  }
}

@media (max-width: 480px) {
  .legal-section {
    padding: var(--spacing-8) var(--spacing-4);
  }

  .legal-content h1 {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
    margin-bottom: var(--spacing-7);
  }
}

/* Corps de l'article */
.article-body {
  font-family: var(--font-body);
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b1);
  color: var(--color-grey-800);
}

.article-body p {
  margin: 0 0 var(--spacing-4);
}

.article-body p:last-child {
  margin-bottom: 0;
}

.article-body h2 {
  font-family: var(--font-heading);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-h3);
  line-height: var(--line-height-h3);
  color: var(--color-grey-800);
  margin: var(--spacing-7) 0 var(--spacing-3);
}

.article-body h3 {
  font-family: var(--font-heading);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-h4);
  line-height: var(--line-height-h4);
  color: var(--color-grey-800);
  margin: var(--spacing-6) 0 var(--spacing-2);
}

.article-body blockquote {
  margin: var(--spacing-6) 0;
  padding: var(--spacing-5) var(--spacing-7);
  border-left: 4px solid var(--color-accent);
  background-color: var(--color-yellow-50);
  font-size: var(--font-size-h6);
  line-height: var(--line-height-h6);
  color: var(--color-grey-700);
  font-style: italic;
}

.article-body blockquote p {
  margin: 0;
}

.article-body ul,
.article-body ol {
  margin: 0 0 var(--spacing-4);
  padding-left: var(--spacing-7);
}

.article-body li {
  margin-bottom: var(--spacing-1);
}

.article-body a {
  color: var(--color-yellow-800);
  text-decoration: underline;
}

.article-body a:hover {
  color: var(--color-grey-800);
}

.article-body img {
  width: 100%;
  height: auto;
  display: block;
  margin: var(--spacing-4) 0;
}

.article-body figure {
  margin: var(--spacing-6) 0;
}

.article-body figcaption {
  font-size: var(--font-size-b3);
  color: var(--color-grey-500);
  text-align: center;
  padding-top: var(--spacing-2);
  font-style: italic;
}

/* Footer de l'article */
.article-footer {
  padding-top: var(--spacing-6);
  border-top: 1px solid var(--color-light-400);
}

.article-back {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  font-family: var(--font-body);
  font-size: var(--font-size-b2);
  color: var(--color-grey-600);
  text-decoration: none;
}

.article-back::before {
  content: '←';
  color: var(--color-accent-dark);
}

.article-back:hover {
  color: var(--color-yellow-800);
  text-decoration: underline;
}

/* Articles liés */
.related-section {
  background-color: var(--color-light-100);
  padding: var(--spacing-10) 0;
}

.related-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-6);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-7);
}

.related-header {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-4);
}

.related-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-h3);
  line-height: var(--line-height-h3);
  color: var(--color-grey-800);
  margin: 0;
}

.related-link {
  font-family: var(--font-body);
  font-size: var(--font-size-b2);
  color: var(--color-grey-600);
  text-decoration: underline;
}

.related-link:hover {
  color: var(--color-yellow-800);
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-6);
}

/* ----------------------------------------
   Article — Responsive
---------------------------------------- */
@media (max-width: 900px) {
  .article-hero {
    aspect-ratio: 16 / 7;
  }

  .article-title {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
  }

  .related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .article-hero {
    aspect-ratio: 4 / 3;
  }

  .article-main {
    padding: var(--spacing-7) var(--spacing-4) var(--spacing-9);
    gap: var(--spacing-6);
  }

  .article-title {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
  }

  .article-excerpt {
    font-size: var(--font-size-b1);
    line-height: var(--line-height-b1);
  }

  .related-grid {
    grid-template-columns: 1fr;
  }

  .related-inner {
    padding: 0 var(--spacing-4);
  }
}


/* ========================================
   Pages Détail Service
======================================== */

/* --- Hero : titre H1 + images duo --- */
.service-detail-hero {
  padding: calc(var(--spacing-10) + var(--spacing-6)) 0 var(--spacing-8);
  overflow: hidden;
}

.service-detail-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-6);
  display: flex;
  gap: var(--spacing-6);
  align-items: center;
}

.service-detail-hero__content {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding: var(--spacing-6) 0;
}

.service-detail-hero__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-h1);
  line-height: var(--line-height-h1);
  color: var(--color-grey-800);
  margin: 0;
}

.service-detail-hero__intro {
  font-family: var(--font-body);
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b1);
  color: var(--color-grey-800);
  margin: 0;
}

.service-detail-hero__images {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  height: 344px;
  overflow: hidden;
}

/* Images hero : layout texte-gauche / images-droite */
.service-detail-hero__images .service-img--primary {
  right: 0;
  top: 0;
}

.service-detail-hero__images .service-img--secondary {
  left: 0;
  top: 90px;
}

/* --- Corps : fond clair, sections centrées --- */
.service-detail-body {
  background: var(--color-light-50);
  padding: var(--spacing-8) 0;
}

.service-detail-body__inner {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 var(--spacing-6);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

.service-detail-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.service-detail-section__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-h2);
  line-height: var(--line-height-h2);
  color: var(--color-grey-800);
  margin: 0;
}

.service-detail-section p {
  font-family: var(--font-body);
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b1);
  color: var(--color-grey-800);
  margin: 0;
}

/* --- FAQ --- */
.service-detail-faq {
  padding: var(--spacing-10) 0;
}

.service-detail-faq__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-6);
}

.service-detail-faq__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-h2);
  line-height: var(--line-height-h2);
  color: var(--color-grey-800);
  text-align: center;
  margin: 0;
}

.service-detail-faq .faq-list {
  max-width: 700px;
  width: 100%;
}

.service-detail-faq .faq-item {
  border-bottom: 1px solid var(--color-light-300);
}

.service-detail-faq .faq-item:last-child {
  border-bottom: none;
}

/* --- Responsive 900px --- */
@media (max-width: 900px) {
  .service-detail-hero__inner {
    flex-direction: column;
    align-items: stretch;
  }

  .service-detail-hero__images {
    order: -1;
    width: 100%;
    height: 300px;
    flex: none; /* empêche flex-basis:0 d'écraser la hauteur (enfants absolus = hauteur naturelle 0) */
  }

  /* Mobile : primaire gauche, secondaire droite décalée (même pattern que service-row) */
  .service-detail-hero__images .service-img--primary {
    width: 310px;
    height: 260px;
    left: 0;
    right: auto;
    top: 0;
  }

  .service-detail-hero__images .service-img--secondary {
    width: 250px;
    height: 185px;
    right: 0;
    left: auto;
    top: 75px;
  }
}

/* --- Responsive 768px --- */
@media (max-width: 768px) {
  .service-detail-hero {
    padding: var(--spacing-8) 0 var(--spacing-6);
  }

  .service-detail-hero__images {
    height: 255px;
  }

  .service-detail-hero__images .service-img--primary {
    width: 60%;
    height: 215px;
  }

  .service-detail-hero__images .service-img--secondary {
    display: block;
    width: 46%;
    height: 175px;
    left: auto;
    right: 0;
    top: 60px;
  }

  .service-detail-hero__title {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
  }
}

/* --- Responsive 480px --- */
@media (max-width: 480px) {
  .service-detail-hero__inner {
    padding: 0 var(--spacing-4);
  }

  .service-detail-hero__images {
    height: 230px;
  }

  .service-detail-hero__images .service-img--primary {
    width: 62%;
    height: 190px;
  }

  .service-detail-hero__images .service-img--secondary {
    width: 44%;
    height: 155px;
    top: 55px;
  }

  .service-detail-body__inner,
  .service-detail-faq__inner {
    padding: 0 var(--spacing-4);
  }
}

/* ----------------------------------------
   Reveal au scroll
   Appliqué via JS (IntersectionObserver)
   uniquement sur les éléments sous le pli.
   Compositor-only : opacity + transform.
---------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity   0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--reveal-delay, 0) * 100ms);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ========================================
   Page 404
======================================== */
.not-found-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding-bottom: var(--spacing-15);
}

/* Hero — image de fond + texte 404 */
.not-found-hero {
  position: relative;
  width: 100%;
  height: 446px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: var(--spacing-9);
  margin-bottom: -52px;
}

.not-found-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
}

/* "Erreur" — positionné en absolu dans le hero, centré horizontalement */
.not-found-erreur {
  position: absolute;
  top: 140px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-heading);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-h4);
  line-height: 1;
  color: var(--color-light-00);
  margin: 0;
  z-index: 1;
}

/* Chiffre "404" — grand, centré, en bas du hero */
.not-found-404 {
  font-family: var(--font-heading);
  font-size: 250px;
  font-weight: 400;
  line-height: 1;
  color: var(--color-light-00);
  margin: 0;
  position: relative;
  z-index: 1;
}

/* Carte de contenu — chevauche le bas du hero */
.not-found-card {
  position: relative;
  z-index: 2;
  background-color: var(--color-light-50);
  border: 1px solid var(--color-border);
  max-width: 700px;
  width: calc(100% - var(--spacing-7) * 2);
  padding: var(--spacing-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-4);
}

.not-found-card__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-h3);
  line-height: var(--line-height-h3);
  color: var(--color-grey-800);
  text-align: center;
  margin: 0;
}

.not-found-card__desc {
  font-family: var(--font-body);
  font-size: var(--font-size-b1);
  font-weight: var(--font-weight-b1);
  line-height: var(--line-height-b1);
  color: var(--color-grey-800);
  text-align: center;
  margin: 0;
}

/* Responsive — 404 */
@media (max-width: 900px) {
  .not-found-hero {
    height: 360px;
  }

  .not-found-404 {
    font-size: 160px;
  }

  .not-found-erreur {
    top: 110px;
    font-size: var(--font-size-h5);
  }
}

@media (max-width: 480px) {
  .not-found-hero {
    height: 280px;
    margin-bottom: -40px;
  }

  .not-found-404 {
    font-size: 100px;
  }

  .not-found-erreur {
    top: 80px;
    font-size: var(--font-size-h6);
  }

  .not-found-card {
    width: calc(100% - var(--spacing-6) * 2);
  }
}