/* ============================================================
   HERO — design Figma (HOME.jpg) — scopé au hero uniquement.
   Tokens extraits de FIGMA_SITE_COV/Style Guide/Style guide.jpg
   ============================================================ */

/* ---------- Fond unifié de la page home : var(--beige) ----------
   Ce fichier n'est chargé que par index.html — les autres pages
   gardent leurs couleurs. Header compris. */

body {
  background: var(--beige);
}

.hero-miux,
.hero-miux__top,
.mobile-menu {
  background: var(--beige);
}

.services-h,
.why-cov,
.packs,
.reviews,
.home-faq {
  background: var(--beige);
}

.hero-fig {
  /* Alias locaux → tokens.css (source unique de vérité) */
  --hf-beige: var(--beige);
  --hf-ink: var(--ink);
  --hf-gold: var(--gold);
  --hf-sky: var(--sky);
  --hf-teal: var(--teal-dark);
  --hf-rust: var(--rust);
  --hf-hairline: var(--hairline);
  --hf-white-line: var(--hairline-on-dark);
  --hf-gradient-cool: var(--gradient-linear-cool);

  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, var(--hero-left)) minmax(0, 1fr);
  padding-inline: var(--margin);
  background: var(--hf-beige);
  color: var(--hf-ink);
}

/* ---------- Colonne gauche ---------- */

.hero-fig__left {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--hf-hairline);
}

.hero-fig__availability {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding-bottom: 1.1rem;
  font-size: 0.8rem;
  font-style: italic;
  font-weight: 300;
  color: var(--hf-ink);
}

.hero-fig__availability-dot {
  flex-shrink: 0;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #3d9a6a;
  box-shadow: 0 0 0 0 rgba(61, 154, 106, 0.45);
  animation: hero-fig-pulse 2.4s ease-out infinite;
}

@keyframes hero-fig-pulse {
  0% { box-shadow: 0 0 0 0 rgba(61, 154, 106, 0.45); }
  70% { box-shadow: 0 0 0 0.35rem rgba(61, 154, 106, 0); }
  100% { box-shadow: 0 0 0 0 rgba(61, 154, 106, 0); }
}

.hero-fig__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 3rem 3rem 0;
}

.hero-fig__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--hf-gold);
  margin-bottom: 1.5rem;
}

.hero-fig__title {
  font-size: clamp(2.5rem, 4.5vw, 3.5rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--hf-ink);
  max-width: 13ch;
  margin-bottom: 1.75rem;
}

.hero-fig__desc {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--hf-ink);
  opacity: 0.75;
  max-width: 34rem;
  margin-bottom: 2.5rem;
}

.hero-fig__ctas {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

/* ---------- Boutons (système Figma) ----------
   Seul effet de survol autorisé : la flèche se déplace. */

.hf-btn {
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.hf-btn__arrow {
  display: inline-block;
  transition: transform 0.25s ease;
}

/* Au survol la flèche pivote de 45° vers le haut (→ devient ↗) */
.hf-btn:hover .hf-btn__arrow {
  transform: rotate(-45deg);
}

/* Dégradé : inner shadow au repos → drop shadow au survol.
   Le dégradé lui-même glisse au survol (background-position). */
.hf-btn--gradient {
  background: var(--gradient-btn-motion);
  background-size: 200% 100%;
  background-position: 0% 50%;
  color: var(--white);
  box-shadow: var(--shadow-btn-inset);
  transition:
    box-shadow 0.3s ease,
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.hf-btn--gradient:hover {
  box-shadow: var(--shadow-btn-drop);
  /* Il se soulève : cohérent avec l'ombre qui passe dessous */
  transform: translateY(-3px);
  background-position: 100% 50%;
}

/* Contour : drop shadow au repos → inner shadow au survol */
.hf-btn--outline {
  background: transparent;
  border: 1px solid var(--hf-teal);
  color: var(--hf-teal);
  box-shadow: var(--shadow-btn-drop);
}

.hf-btn--outline:hover {
  box-shadow: var(--shadow-btn-inset);
  /* Il s'enfonce : cohérent avec l'ombre qui passe à l'intérieur */
  transform: translateY(2px);
}

/* ---------- Logos clients ---------- */

.hero-fig__clients {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  flex-wrap: wrap;
  padding: 1.5rem 2rem 1.5rem 0;
  border-top: 1px solid var(--hf-hairline);
}

.hero-fig__client {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--hf-ink);
  opacity: 0.55;
}

/* ---------- Colonne droite : panneau dégradé + deck ---------- */

.hero-fig__right {
  position: relative;
  background: var(--hf-gradient-cool);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34rem;
  overflow: hidden;
  /* Le panneau file jusqu'au bord droit de l'écran, comme sur le Figma */
  margin-right: calc(-1 * var(--margin));
}

.hero-fig__deck {
  position: relative;
  width: min(21rem, 78%);
  height: 17rem;
}

.hero-fig__card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  border-radius: 1.25rem;
  /* Verre : neutre, sans teinte — tokens --glass-* */
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  box-shadow: var(--glass-highlight), var(--shadow-card);
  color: var(--white);
  overflow: hidden;
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.55s ease,
    box-shadow 0.4s ease,
    z-index 0s 0.2s;
}

/* Reflet — bande lumineuse diagonale qui balaye le verre au survol */
.hero-fig__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 32%,
    rgba(255, 255, 255, 0.14) 48%,
    rgba(255, 255, 255, 0.04) 54%,
    transparent 68%
  );
  transform: translateX(-130%);
  pointer-events: none;
}

/* Empilement : la carte de devant pleine, celles de derrière
   décalées vers le haut-droite, visibles en chevauchement */
.hero-fig__card[data-pos="0"] {
  transform: translate(0, 0) scale(1);
  opacity: 1;
  z-index: 3;
}

/* Survol : la carte de devant se soulève, ombre plus profonde,
   et le reflet balaye le verre une fois */
.hero-fig__deck:hover .hero-fig__card[data-pos="0"] {
  transform: translate(0, -0.5rem) scale(1);
  box-shadow: var(--glass-highlight), var(--shadow-card-hover);
}

/* La carte de devant est cliquable : passe à la suivante */
.hero-fig__card[data-pos="0"] {
  cursor: pointer;
}

.hero-fig__deck:hover .hero-fig__card[data-pos="0"]::after {
  animation: hero-fig-shine 0.9s ease 0.05s forwards;
}

@keyframes hero-fig-shine {
  from { transform: translateX(-130%); }
  to { transform: translateX(130%); }
}

.hero-fig__card[data-pos="1"] {
  transform: translate(1.1rem, -1.1rem) scale(0.965);
  opacity: 0.75;
  z-index: 2;
}

.hero-fig__card[data-pos="2"] {
  transform: translate(2.2rem, -2.2rem) scale(0.93);
  opacity: 0.45;
  z-index: 1;
}

/* Contenu lisible seulement sur la carte de devant */
.hero-fig__card[data-pos="1"] .hero-fig__card-inner,
.hero-fig__card[data-pos="2"] .hero-fig__card-inner {
  opacity: 0;
}

.hero-fig__card-inner {
  transition: opacity 0.35s ease;
}

.hero-fig__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid var(--hf-white-line);
  margin-bottom: 1.1rem;
}

.hero-fig__card-eyebrow {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 0.6rem;
}

.hero-fig__card-title {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.7rem;
  /* Blanc explicite : elevated.css force la couleur des h2 en sombre */
  color: var(--white);
}

.hero-fig__card-text {
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.8);
}

/* ---------- Points de pagination ---------- */

.hero-fig__dots {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
}

.hero-fig__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.hero-fig__dot.is-active {
  background: var(--hf-gold);
  transform: scale(1.25);
}

/* ============================================================
   BOUTON FANTÔME — 3e bouton du système (texte + flèche)
   ============================================================ */

.hf-btn--ghost {
  background: transparent;
  border: none;
  color: var(--teal-dark);
  padding: 0.85rem 0;
  gap: 0.75rem;
  box-shadow: none;
}

/* Il glisse vers la droite, cohérent avec un lien texte */
.hf-btn--ghost:hover {
  transform: translateX(0.25rem);
}

/* ============================================================
   SECTION SERVICES — réhabillage tokens (design Figma).
   L'interaction (scroll horizontal, survol photo) ne change pas :
   uniquement typo, couleurs, boutons.
   ============================================================ */

/* Intro */
.services-h__label {
  font: var(--type-body-sm);
  font-weight: var(--fw-medium);
  color: var(--gold);
}

.services-h__headline {
  font: var(--type-h1);
  letter-spacing: var(--ls-title);
  color: var(--ink);
}

.services-h__intro-text {
  font: var(--type-body);
  color: var(--ink-muted);
}

.services-h__links {
  gap: 1rem;
}

.services-h__hint {
  font: var(--type-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--ink-muted);
}

/* Séparateurs et fonds des panneaux */
.services-h__panel {
  border-right-color: var(--hairline);
}

.services-h__panel--service {
  background: var(--beige);
}

/* Cards au repos : grand chiffre, titre, description — tokens */
.services-h__num {
  font: var(--type-display);
  letter-spacing: var(--ls-title);
  color: var(--ink);
}

.services-h__card-title {
  font: var(--type-h2);
  letter-spacing: var(--ls-title);
  color: var(--ink);
}

.services-h__card-desc {
  font: var(--type-body);
  color: var(--ink-muted);
}

/* Survol (is-active) : textes en blanc sur la photo */
.services-h__panel--service.is-active .services-h__num,
.services-h__panel--service.is-active .services-h__card-title {
  color: var(--white);
}

.services-h__panel--service.is-active .services-h__card-desc {
  color: var(--white);
  font-weight: var(--fw-light);
}

/* Rond flèche */
.services-h__card-arrow {
  background: var(--beige);
  color: var(--ink);
}

/* ============================================================
   SECTION AUTRES SERVICES (4/5/6/+) — design Figma.
   Fond teal-dark, cercles or avec inner shadow, hover conservé
   sur les lignes de la liste (futurs liens vers les pages).
   ============================================================ */

.services-h__also-section {
  background: var(--teal-dark);
}

/* Filets adaptés au fond sombre */
.services-h__also-list-items::before,
.services-h__also-list-row::after {
  background: var(--hairline-on-dark);
}

/* Lignes de la liste */
.services-h__also-list {
  max-width: 20rem;
}

.services-h__also-list-row {
  gap: 1.5rem;
  padding: 1.6rem 0;
  font: var(--type-h5);
  color: var(--white);
}

.services-h__also-list-row a {
  display: inline-block;
  color: var(--white-muted);
  transition:
    color var(--dur-med) ease,
    transform var(--dur-med) var(--ease-out);
}

/* Cercles or : contour + inner shadow */
.services-h__also-list-num {
  width: 3.25rem;
  height: 3.25rem;
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  font: var(--fw-light) var(--fs-h3) / 1 var(--font-sans);
  box-shadow: var(--shadow-btn-inset);
  transition:
    background var(--dur-med) ease,
    color var(--dur-med) ease,
    box-shadow var(--dur-med) ease;
}

/* Survol (desktop) ou zone de scroll (mobile) : mêmes effets */
.services-h__also-list-row.is-active a {
  color: var(--white);
  transform: translateX(0.25rem);
  opacity: 1;
}

.services-h__also-list-row.is-active .services-h__also-list-num {
  background: var(--gold);
  color: var(--teal-dark);
  box-shadow: none;
}

.services-h__also-list-row:hover a {
  color: var(--white);
  transform: translateX(0.25rem);
  opacity: 1;
}

.services-h__also-list-row:hover .services-h__also-list-num {
  background: var(--gold);
  color: var(--teal-dark);
  box-shadow: none;
}

/* Bloc de droite */
.services-h__also-eyebrow {
  font: var(--type-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--gold);
}

.services-h__also-headline {
  font: var(--type-h2);
  letter-spacing: var(--ls-title);
  color: var(--white);
}

.services-h__also-body {
  font: var(--type-body-lg);
  color: var(--white-muted);
}

/* Lien fantôme blanc sur fond sombre */
.services-h__also-section .hf-btn--ghost {
  color: var(--white);
}

/* ============================================================
   SECTION POURQUOI CHOISIR COV 360 — design Figma.
   Layout inchangé : uniquement couleurs, typo, textes.
   ============================================================ */

.why-cov {
  border-top-color: var(--hairline);
}

.why-cov__label {
  font: var(--type-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--gold);
}

.why-cov__label::before {
  content: "• ";
}

.why-cov__headline {
  font: var(--type-h3);
  letter-spacing: var(--ls-title);
  color: var(--ink);
}

.why-cov__intro {
  font: var(--type-body-lg);
  color: var(--ink-muted);
}

.why-cov__item {
  border-bottom-color: var(--hairline);
  /* Glissement doux au survol + transitions du reveal au scroll */
  transition:
    padding-left 0.45s var(--ease-out),
    opacity 0.75s var(--ease-out),
    transform 0.75s var(--ease-out);
}

.why-cov__num {
  font: var(--type-display-sm);
  letter-spacing: var(--ls-title);
  color: var(--teal-dark);
}

/* Quinconce : le bloc texte descend, le titre s'aligne
   vers le milieu du chiffre */
.why-cov__item-body {
  padding-top: 1.5rem;
}

.why-cov__card-title {
  font: var(--type-h3);
  font-weight: var(--fw-regular);
  color: var(--teal-dark);
}

.why-cov__cta {
  margin-top: 2rem;
}

.why-cov__desc {
  font: var(--type-body);
  color: var(--ink-muted);
  /* Nécessaire au repli piloté par le scroll (why-collapse.js) */
  overflow: hidden;
}

/* Le container gauche ne bouge plus au scroll */
.why-cov__head {
  position: static;
}

/* Survol des items : ni ombre ni soulèvement (elevated.css),
   et les chiffres restent teal (pas de gris) */
@media (hover: hover) {
  .why-cov__item:hover {
    transform: none;
    box-shadow: none;
  }

  .why-cov__item:hover .why-cov__num {
    color: var(--teal-dark);
  }
}

/* ============================================================
   SECTION RÉALISATIONS (work-showcase) — design Figma.
   Interaction (scroll, cercle, fondu des slides) inchangée :
   uniquement en-tête, boutons, couleurs.
   ============================================================ */

.work-showcase__eyebrow {
  font: var(--type-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--gold);
}

.work-showcase__eyebrow::before {
  content: "• ";
}

.work-showcase__section-title {
  font: var(--type-h1);
  letter-spacing: var(--ls-title);
  color: var(--white);
}

/* Liens fantômes blancs (en-tête + slides) */
.work-showcase .hf-btn--ghost {
  color: var(--white);
}

.work-showcase__all {
  padding-block: 0.4rem;
}

/* Compteur 01/03 */
.work-showcase__counter {
  font: var(--type-body-sm);
  color: var(--white-muted);
}

/* Barre de progression */
.work-showcase__progress span {
  background: var(--hairline-on-dark);
}

.work-showcase__progress span.is-active,
.work-showcase__progress span.is-done {
  background: var(--white);
}

/* Slide : titre en graisse normale, catégorie atténuée */
.work-showcase__title {
  font: var(--type-h2);
  font-weight: var(--fw-regular);
  color: var(--white);
}

.work-showcase__category {
  font: var(--type-body-lg);
  color: var(--white-muted);
}

/* Cercle central : fond ink, liserés adaptés */
.work-showcase__media-frame {
  background: var(--ink);
  border-color: var(--hairline-on-dark);
}

.work-showcase__arc {
  border-color: var(--white-faint);
}

.work-showcase__arc-tick {
  background: var(--white);
}

.work-showcase__hint {
  font: var(--type-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--white-faint);
}

/* ============================================================
   SECTION NOTRE MÉTHODE (home-process) — design Figma.
   Étapes en texte nu, card 02 inclinée en dégradé cool.
   ============================================================ */

.home-process {
  background: var(--teal-dark);
  border-top-color: var(--hairline-on-dark);
}

.home-process__label {
  font: var(--type-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--gold);
}

.home-process__label::before {
  content: "• ";
}

.home-process__headline {
  font: var(--type-h3);
  letter-spacing: var(--ls-title);
  color: var(--white);
}

.home-process__intro {
  font: var(--type-body-lg);
  color: var(--white-muted);
}

.home-process__num {
  font: var(--type-body-sm);
  color: var(--white-faint);
}

.home-process__step-title {
  font: var(--type-h3);
  font-weight: var(--fw-regular);
  color: var(--sky);
}

.home-process__step-text {
  font: var(--type-body);
  color: var(--white-muted);
}

/* Card 02 mise en avant : dégradé cool, inclinée, texte blanc */
.home-process__step--tilted {
  background: var(--gradient-linear-cool);
  border: none;
  border-radius: var(--radius-md);
  transform: rotate(4deg);
  box-shadow: 0 10px 20px -8px color-mix(in srgb, black 45%, transparent);
  transition:
    transform var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) ease;
}

/* Survol : la card se redresse et se soulève légèrement */
.home-process__step--tilted:hover {
  transform: rotate(1deg) translateY(-0.35rem);
  box-shadow: 0 14px 26px -10px color-mix(in srgb, black 55%, transparent);
}

.home-process__step--tilted .home-process__num {
  color: var(--white-faint);
}

.home-process__step--tilted .home-process__step-title {
  color: var(--white);
}

.home-process__step--tilted .home-process__step-text {
  color: var(--white-muted);
}

/* ============================================================
   SECTION FORMULES (packs) — design Figma.
   Cards à coins nets. Une seule card verte à la fois :
   au survol d'une card claire, elle devient verte et la card
   du milieu passe en bleu.
   ============================================================ */

.packs {
  border-top-color: var(--hairline);
}

.packs__label {
  font: var(--type-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--gold);
}

.packs__label::before {
  content: "• ";
}

.packs__headline {
  font: var(--type-h3);
  letter-spacing: var(--ls-title);
  color: var(--ink);
}

.packs__intro {
  font: var(--type-body-lg);
  color: var(--ink-muted);
}

.packs__cta {
  margin-top: 0.75rem;
}

/* Palette de card pilotée par variables : l'échange de couleurs
   se fait en changeant les variables, les transitions existantes
   animent le tout */
.packs__card {
  --card-bg: var(--sky);
  --card-icon: var(--teal-dark);
  --card-porte: var(--ink-faint);
  --card-title: var(--teal-dark);
  --card-text: var(--ink);
  --card-line: color-mix(in srgb, var(--teal-dark) 30%, transparent);

  background: var(--card-bg);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 18px -12px color-mix(in srgb, var(--shadow-ink) 40%, transparent);
}

.packs__card--featured {
  --card-bg: var(--teal-dark);
  --card-icon: var(--white);
  --card-porte: var(--white-faint);
  --card-title: var(--sky);
  --card-text: var(--white);
  --card-line: var(--hairline-on-dark);
}

/* Survol — on neutralise les anciennes règles beiges de styles.css
   en reprenant les mêmes sélecteurs avec la palette tokens.
   Jamais de beige sur les cards, dans aucun état. */
@media (hover: hover) and (pointer: fine) {
  /* La card survolée devient verte */
  .packs__grid > li:hover .packs__card {
    --card-bg: var(--teal-dark);
    --card-icon: var(--white);
    --card-porte: var(--white-faint);
    --card-title: var(--sky);
    --card-text: var(--white);
    --card-line: var(--hairline-on-dark);
    background: var(--card-bg);
    border-color: transparent;
    transform: translateY(-0.2rem);
  }

  .packs__grid > li:hover .packs__porte {
    color: var(--card-porte);
  }

  .packs__grid > li:hover .packs__desc {
    color: var(--card-text);
  }

  .packs__grid > li:hover .packs__card-title {
    color: var(--card-title);
    font-weight: var(--fw-regular);
  }

  .packs__grid > li:hover .packs__icon {
    color: var(--card-icon);
    background: none;
    border: none;
    transform: none;
  }

  .packs__grid > li:hover .packs__tags {
    border-top-color: var(--card-line);
  }

  .packs__grid > li:hover .packs__tags li {
    color: var(--card-title);
    border-color: var(--card-line);
    background: transparent;
  }

  /* Pendant ce temps, la card du milieu passe en bleu */
  .packs__grid:has(> li:hover) > li:not(:hover) .packs__card--featured {
    --card-bg: var(--sky);
    --card-icon: var(--teal-dark);
    --card-porte: var(--ink-faint);
    --card-title: var(--teal-dark);
    --card-text: var(--ink);
    --card-line: color-mix(in srgb, var(--teal-dark) 30%, transparent);
    background: var(--card-bg);
    border-color: transparent;
    transform: none;
  }

  .packs__grid:has(> li:hover) > li:not(:hover) .packs__card--featured .packs__porte {
    color: var(--card-porte);
  }

  .packs__grid:has(> li:hover) > li:not(:hover) .packs__card--featured .packs__desc {
    color: var(--card-text);
  }

  .packs__grid:has(> li:hover) > li:not(:hover) .packs__card--featured .packs__card-title {
    color: var(--card-title);
    font-weight: var(--fw-regular);
  }

  .packs__grid:has(> li:hover) > li:not(:hover) .packs__card--featured .packs__icon {
    color: var(--card-icon);
    background: none;
    border: none;
    transform: none;
  }

  .packs__grid:has(> li:hover) > li:not(:hover) .packs__card--featured .packs__tags {
    border-top-color: var(--card-line);
  }

  .packs__grid:has(> li:hover) > li:not(:hover) .packs__card--featured .packs__tags li {
    color: var(--card-title);
    border-color: var(--card-line);
    background: transparent;
  }
}

/* Application des variables aux éléments */
.packs__icon,
.packs__card--featured .packs__icon {
  background: none;
  border: none;
  width: auto;
  height: auto;
  display: block;
  align-self: flex-start;
  margin: 0 0 2.25rem;
  color: var(--card-icon);
}

.packs__icon svg {
  width: 28px;
  height: 28px;
  display: block;
}

.packs__porte,
.packs__card--featured .packs__porte {
  font: var(--type-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--card-porte);
}

.packs__card-title,
.packs__card--featured .packs__card-title {
  font: var(--type-h3);
  font-weight: var(--fw-regular);
  color: var(--card-title);
}

.packs__desc,
.packs__card--featured .packs__desc {
  font: var(--type-body);
  color: var(--card-text);
}

.packs__tags,
.packs__card--featured .packs__tags {
  border-top: 1px solid var(--card-line);
  padding-top: 1.5rem;
}

.packs__tags li,
.packs__card--featured .packs__tags li {
  font: var(--type-body-sm);
  color: var(--card-title);
  border: 1px solid var(--card-line);
  border-radius: var(--radius-full);
  background: transparent;
  padding: 0.4rem 1rem;
}

/* Zone de scroll (mobile) : mêmes effets que le survol desktop,
   + léger soulèvement de la card active */
.packs__grid > li.is-active .packs__card {
  --card-bg: var(--teal-dark);
  --card-icon: var(--white);
  --card-porte: var(--white-faint);
  --card-title: var(--sky);
  --card-text: var(--white);
  --card-line: var(--hairline-on-dark);
  background: var(--card-bg);
  transform: translateY(-0.3rem);
}

.packs__grid:has(> li.is-active) > li:not(.is-active) .packs__card--featured {
  --card-bg: var(--sky);
  --card-icon: var(--teal-dark);
  --card-porte: var(--ink-faint);
  --card-title: var(--teal-dark);
  --card-text: var(--ink);
  --card-line: color-mix(in srgb, var(--teal-dark) 30%, transparent);
  background: var(--card-bg);
}

.packs__grid > li.is-active .packs__porte,
.packs__grid:has(> li.is-active) > li:not(.is-active) .packs__card--featured .packs__porte {
  color: var(--card-porte);
}

.packs__grid > li.is-active .packs__desc,
.packs__grid:has(> li.is-active) > li:not(.is-active) .packs__card--featured .packs__desc {
  color: var(--card-text);
}

.packs__grid > li.is-active .packs__card-title,
.packs__grid:has(> li.is-active) > li:not(.is-active) .packs__card--featured .packs__card-title {
  color: var(--card-title);
}

.packs__grid > li.is-active .packs__icon,
.packs__grid:has(> li.is-active) > li:not(.is-active) .packs__card--featured .packs__icon {
  color: var(--card-icon);
}

.packs__grid > li.is-active .packs__tags,
.packs__grid:has(> li.is-active) > li:not(.is-active) .packs__card--featured .packs__tags {
  border-top-color: var(--card-line);
}

.packs__grid > li.is-active .packs__tags li,
.packs__grid:has(> li.is-active) > li:not(.is-active) .packs__card--featured .packs__tags li {
  color: var(--card-title);
  border-color: var(--card-line);
}

/* Badge : plein or quand la card du milieu passe en bleu (zone) */
.packs__grid:has(> li.is-active) > li:not(.is-active) .packs__card--featured .packs__badge {
  background: var(--gold);
  color: var(--sky);
}

/* Articles : effet zone (lift + zoom photo) */
.home-articles__card.is-active {
  transform: translateY(-0.3rem);
}

.home-articles__card.is-active .home-articles__img {
  transform: scale(1.05);
}

/* Badge « Le plus demandé » : pill or */
.packs__badge {
  font: var(--type-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: var(--radius-full);
  background: transparent;
  transition:
    background var(--dur-med) ease,
    color var(--dur-med) ease;
}

/* Quand la card du milieu passe en bleu : badge plein or, texte bleu */
@media (hover: hover) and (pointer: fine) {
  .packs__grid:has(> li:hover) > li:not(:hover) .packs__card--featured .packs__badge {
    background: var(--gold);
    color: var(--sky);
  }
}

/* ============================================================
   SECTION CTA (packs-cta) — design Figma.
   Bannière photo floutée + voile teal + filigrane COV,
   contenu sur la moitié droite.
   ============================================================ */

/* Bande bord à bord, hauteur maquette (~420px) */
.packs-cta {
  position: relative;
  margin: 0;
  padding: 0;
  border-radius: 0;
  overflow: hidden;
  background: var(--teal-dark);
  min-height: 26rem;
}

/* Fond unique : l'image composite (photo + logo, déjà floutés).
   Rien d'autre par-dessus : on désactive l'ancienne photo et le
   voile sombre hérités de styles.css. */
.packs-cta::before,
.packs-cta::after {
  content: none;
}

.packs-cta__bg {
  position: absolute;
  inset: 0;
  /* Export Figma exact, utilisé tel quel. Les 5 pages principales
     posent leur propre bandeau via --cta-bg (inline sur la section) */
  background-image: var(--cta-bg, url(packs-cta-banner.jpg));
  background-size: cover;
  background-position: center;
}

.packs-cta__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  max-width: none;
  margin: 0;
  padding: clamp(3rem, 6vh, 4rem) var(--margin);
}

.packs-cta__inner > * {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

.packs-cta__eyebrow {
  font: var(--type-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--gold);
  margin-bottom: 1rem;
}

.packs-cta__eyebrow::before {
  content: "• ";
}

.packs-cta__title {
  font: var(--type-h1);
  letter-spacing: var(--ls-title);
  color: var(--white);
  margin-bottom: 1.25rem;
  max-width: 24ch;
}

.packs-cta__text {
  font: var(--type-body-lg);
  color: var(--white-muted);
  max-width: 44ch;
  margin-bottom: 2rem;
}

/* Bloc de texte calé sur la moitié droite */
@media (min-width: 900px) {
  .packs-cta__inner {
    width: 50%;
    margin-left: auto;
    padding-inline: 1.5rem var(--margin);
  }
}

/* ============================================================
   SECTION NOS ARTICLES — design Figma.
   Blocs sombres = placeholders en attendant les photos.
   ============================================================ */

.home-articles {
  background: var(--beige);
  padding: clamp(4rem, 8vh, 6rem) var(--margin) clamp(4.5rem, 9vh, 7rem);
}

.home-articles__inner {
  max-width: var(--layout-width);
  margin-inline: auto;
}

.home-articles__label {
  font: var(--type-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--gold);
  margin: 0 0 0.75rem;
}

.home-articles__label::before {
  content: "• ";
}

.home-articles__headline {
  font: var(--type-h3);
  letter-spacing: var(--ls-title);
  color: var(--ink);
  margin: 0 0 0.75rem;
}

.home-articles__intro {
  font: var(--type-body-lg);
  color: var(--ink-muted);
  max-width: 30ch;
  margin: 0;
}

.home-articles__all {
  margin-top: 0.5rem;
}

.home-articles__grid {
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 800px) {
  .home-articles__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.home-articles__card {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  background: transparent;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}

.home-articles__media {
  aspect-ratio: 2.15 / 1;
  overflow: hidden;
  border-radius: 0;
}

/* Placeholder sombre — remplacer par la photo de l'article
   (background-image sur .home-articles__img) */
.home-articles__img {
  width: 100%;
  height: 100%;
  background-color: color-mix(in srgb, var(--ink) 96%, var(--white));
  background-size: cover;
  background-position: center;
  transition: transform var(--dur-slow) var(--ease-out);
}

.home-articles__body {
  padding: 1.3rem 1.5rem 1.6rem;
}

.home-articles__cat {
  font: var(--type-body-sm);
  color: var(--gold);
  margin: 0 0 0.6rem;
}

.home-articles__title {
  font: var(--type-h3);
  letter-spacing: var(--ls-title);
  color: var(--ink);
  margin: 0 0 0.9rem;
  max-width: 26ch;
}

.home-articles__desc {
  font: var(--type-body);
  color: var(--ink-muted);
  margin: 0;
}

/* Survol : la card se soulève, la photo zoome doucement */
@media (hover: hover) {
  .home-articles__card:hover {
    transform: translateY(-0.3rem);
    border-color: color-mix(in srgb, var(--ink) 35%, transparent);
  }

  .home-articles__card:hover .home-articles__img {
    transform: scale(1.05);
  }
}

/* ============================================================
   SECTION AVIS CLIENTS (reviews) — design Figma.
   Fond dégradé cool, bande sombre en biseau en bas,
   interaction du slider inchangée.
   ============================================================ */

.reviews {
  position: relative;
  overflow: hidden;
  /* Dégradé simple : ciel → teal profond */
  background: linear-gradient(135deg, var(--sky) 0%, var(--teal-dark) 100%);
  padding-bottom: clamp(5rem, 9vh, 7rem);
}

.reviews__inner {
  position: relative;
  z-index: 1;
}

.reviews__label {
  font: var(--type-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--teal-dark);
}

.reviews__label::before {
  content: "• ";
}

.reviews__title {
  font: var(--type-h3);
  letter-spacing: var(--ls-title);
  color: var(--teal-dark);
}

.reviews__intro {
  font: var(--type-body);
  color: color-mix(in srgb, var(--teal-dark) 80%, transparent);
  max-width: 24rem;
}

/* Le slider doit être assez haut pour que la signature
   descende près du pli, comme sur la maquette */
.reviews__stage {
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr);
  column-gap: clamp(3rem, 7vw, 7rem);
}

.reviews__slider {
  position: relative;
  min-height: clamp(13rem, 28vh, 17rem);
  /* La partie avis descend sous le niveau des titres */
  margin-top: clamp(2.5rem, 5vh, 3.5rem);
}


/* Épuré : on retire le gros numéro décoratif (le compteur 01/03 suffit) */
.reviews__ghost-num {
  display: none;
}

/* Citation, signature et label alignés ensemble */
.reviews__slide {
  grid-template-columns: minmax(0, 1fr);
}

/* Le label de catégorie (WEB DESIGN) au-dessus de la citation */
.reviews__tag {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  margin-bottom: 0.75rem;
}

.reviews__quote {
  grid-column: 1;
  grid-row: 2;
}

.reviews__foot {
  grid-column: 1;
  grid-row: 3;
  justify-self: start;
}

.reviews__ghost-num {
  font: var(--type-display);
  letter-spacing: var(--ls-title);
  color: color-mix(in srgb, var(--white) 40%, transparent);
  text-align: right;
}

/* Guillemets anglais comme la maquette */
.reviews__quote p::before {
  content: "“";
  opacity: 0.9;
}

.reviews__quote p::after {
  content: "”";
  opacity: 0.9;
}

.reviews__tag {
  font: var(--type-body-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--white);
}

.reviews__quote p {
  font: var(--fw-regular) var(--fs-h3) / 1.5 var(--font-sans);
  color: var(--white);
}

.reviews__name {
  font: var(--type-h5);
  font-style: normal;
  color: var(--white);
}

.reviews__meta {
  font: var(--type-body-sm);
  color: var(--white);
}

/* Pagination : dans la colonne de l'avis uniquement,
   filet blanc au-dessus qui s'arrête au niveau de l'avis */
.reviews__nav {
  border-top: 1px solid var(--white);
}

.reviews__nav-btn {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-full);
  border: none;
  background: var(--sky);
  color: var(--teal-dark);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background var(--dur-fast) ease,
    color var(--dur-fast) ease;
}

.reviews__nav-btn:hover {
  transform: scale(1.08);
  background: var(--gold);
  color: var(--white);
}

.reviews__counter {
  font: var(--type-body-sm);
  color: var(--white);
  margin: 0;
}

/* ============================================================
   SECTION FAQ — design Figma.
   Accordéon inchangé (faq-accordion.js) : uniquement habillage.
   ============================================================ */

.home-faq {
  border-top-color: var(--hairline);
}

.home-faq__label {
  font: var(--type-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--gold);
}

.home-faq__label::before {
  content: "• ";
}

.home-faq__headline {
  font: var(--type-h3);
  letter-spacing: var(--ls-title);
  color: var(--ink);
}

.home-faq__item {
  border-bottom-color: var(--gold);
  /* Survol : tout glisse doucement vers la droite */
  transition: padding-left 0.45s var(--ease-out);
}

.home-faq__item:last-child {
  border-bottom: 1px solid var(--gold);
}

@media (hover: hover) {
  .home-faq__item:hover {
    padding-left: 0.3rem;
  }
}

.home-faq__question {
  font: var(--type-body-lg);
  color: var(--ink);
  /* Synchronisé avec l'animation du panneau (450 ms) */
  transition: padding 0.45s var(--ease-out);
}

.home-faq__question-label {
  font-weight: var(--fw-light);
}

.home-faq__item.is-open .home-faq__question-label {
  font-weight: var(--fw-semibold);
}

.home-faq__answer {
  font: var(--type-body);
  color: var(--ink-muted);
  max-width: 60ch;
}

/* Chevron cerclé or ; ouvert : plein or, chevron blanc vers le haut */
.home-faq__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--gold);
  color: var(--gold);
  background: transparent;
  transition:
    background var(--dur-med) ease,
    color var(--dur-med) ease,
    transform var(--dur-med) var(--ease-out);
}

.home-faq__item.is-open .home-faq__icon {
  background: var(--gold);
  color: var(--white);
  transform: rotate(180deg);
}

/* ============================================================
   FOOTER — design Figma. Fond teal-dark, logo clair,
   nav numérotée, 3 cellules, copyright en bas à droite.
   ============================================================ */

.site-footer {
  background: var(--teal-dark);
  color: var(--white);
  border-top: none;
}

.site-footer__top {
  border-bottom-color: var(--hairline-on-dark);
}

.site-footer__brand {
  border-right-color: var(--hairline-on-dark);
}

/* Monogramme blanchi, teinte légèrement menthe comme la maquette */
.site-footer__logo {
  filter: brightness(0) invert(1);
  opacity: 0.88;
}

.site-footer__nav-link {
  border-bottom-color: var(--hairline-on-dark);
  color: var(--white);
}

.site-footer__nav-num {
  font: var(--type-body-sm);
  color: var(--white-faint);
}

.site-footer__nav-label {
  font-weight: var(--fw-semibold);
  color: var(--white);
}

/* Survol : fond bleu ciel (au lieu du beige hérité), texte teal */
@media (hover: hover) {
  .site-footer__nav-link:hover {
    background: var(--sky);
    color: var(--teal-dark);
  }
}

.site-footer__cell {
  border-right-color: var(--hairline-on-dark);
}

.site-footer__tag {
  font: var(--fw-light) var(--fs-h3) / 1.3 var(--font-sans);
  color: var(--white-muted);
  text-transform: none;
  letter-spacing: normal;
}

/* Liens légaux sur une ligne compacte */
.site-footer__meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.45rem;
}

.site-footer__value {
  font: var(--type-h4);
  color: var(--gold);
  transition: color var(--dur-fast) ease;
}

.site-footer__value:hover {
  color: var(--gold-hover);
}

.site-footer__social a {
  font: var(--fw-regular) var(--fs-h4) / 1.6 var(--font-sans);
  font-style: italic;
  color: var(--white);
  transition: color var(--dur-fast) ease;
}

.site-footer__social a:hover {
  color: var(--gold);
}

.site-footer__meta-link {
  font: var(--type-body-sm);
  font-style: italic;
  color: var(--white-muted);
  transition: color var(--dur-fast) ease;
}

.site-footer__meta-link:hover {
  color: var(--gold);
}

.site-footer__meta-sep {
  color: var(--white-faint);
}

/* Barre légale : liens mentions/politiques calés à gauche sous les
   contacts, copyright à droite, sur la même ligne */
.site-footer__legal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem 2.5rem;
  padding: 0.75rem clamp(1.5rem, 3.5vw, 3rem);
  border-top: 1px solid var(--hairline-on-dark);
}

.site-footer__legal .site-footer__meta-line {
  margin: 0;
  min-width: 0;
  flex: 1 1 20rem;
}

.site-footer__legal .site-footer__copyright {
  flex-shrink: 0;
  margin-left: auto;
}

.site-footer__copyright {
  margin: 0;
  text-align: right;
  font: var(--type-body-sm);
  font-style: italic;
  color: var(--white-muted);
}

/* ============================================================
   ENTRÉE DU HERO AU CHARGEMENT — fondu + montée en cascade
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  @keyframes hero-rise {
    from {
      opacity: 0;
      transform: translateY(1rem);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes hero-fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  .hero-fig__eyebrow {
    animation: hero-rise 0.7s var(--ease-out) 0.05s both;
  }

  .hero-fig__title {
    animation: hero-rise 0.7s var(--ease-out) 0.15s both;
  }

  .hero-fig__desc {
    animation: hero-rise 0.7s var(--ease-out) 0.25s both;
  }

  .hero-fig__ctas {
    animation: hero-rise 0.7s var(--ease-out) 0.35s both;
  }

  .hero-fig__availability {
    animation: hero-fade 0.8s ease 0.5s both;
  }

  .hero-fig__clients {
    animation: hero-fade 0.8s ease 0.6s both;
  }

  .hero-fig__right {
    animation: hero-fade 1s ease 0.2s both;
  }
}

/* ============================================================
   RESPONSIVE — tablette & mobile (<900px).
   Le desktop reste strictement inchangé.
   ============================================================ */

@media (max-width: 900px) {
  /* Aucun débordement horizontal possible sur mobile */
  html,
  body {
    overflow-x: clip;
  }

  /* --- Hero : hint et disponibilité retirés, rythme resserré --- */
  .hero-fig__availability {
    display: none;
  }

  .hero-fig__content {
    padding-top: 2.5rem;
  }

  .hero-fig__title {
    max-width: none;
  }

  /* --- Section expertises : pas de scroll horizontal, donc pas de hint --- */
  .services-h__hint {
    display: none;
  }

  .services-h__links {
    align-items: flex-start;
    align-self: flex-start;
    justify-self: start;
  }

  /* --- Pourquoi COV : une colonne, chiffres resserrés --- */
  .why-cov__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .why-cov__head {
    position: static;
    max-width: none;
  }

  .why-cov__item {
    grid-template-columns: auto 1fr;
    gap: 1.25rem;
    padding: 1.75rem 0;
  }

  .why-cov__item-body {
    padding-top: 0.5rem;
  }

  /* --- Méthode : les 4 blocs sur 2 colonnes --- */
  .home-process__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .home-process__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
    justify-self: stretch;
    gap: 1.5rem 1rem;
  }

  .home-process__steps > li:nth-child(2) {
    justify-content: flex-start;
  }

  .home-process__step {
    max-width: none;
    padding: 1.25rem 0;
  }

  .home-process__step--tilted {
    padding: 1.5rem;
    transform: rotate(1.5deg);
  }

  /* --- CTA : bloc pleine largeur, bannière moins haute --- */
  .packs-cta {
    min-height: 22rem;
  }

  .packs-cta__inner {
    width: 100%;
    margin-left: 0;
    padding: 3rem var(--margin);
  }

  /* --- Avis : une colonne --- */
  .reviews__stage {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .reviews__head {
    max-width: none;
  }

  .reviews__slider {
    margin-top: 2rem;
    min-height: 0;
  }

  .reviews__slide {
    position: relative;
    inset: auto;
  }

  .reviews__slide[hidden] {
    display: none;
  }

  .reviews__nav {
    margin-top: 1rem;
    border-top: none;
    padding-top: 0;
  }

  /* --- Articles : cards délimitées par un liseré fin --- */
  .home-articles__card {
    border: 1px solid var(--ink-faint);
    overflow: hidden;
  }

  .home-articles__media {
    border-radius: 0;
  }

  .home-articles__body {
    padding: 1.25rem 1.25rem 1.5rem;
  }

  /* --- Avis : aéré, label sous la signature, bloc délimité --- */
  .reviews__slide {
    row-gap: 0.85rem;
    border: 1px solid var(--white-faint);
    border-radius: var(--radius-md);
    padding: 1.5rem 1.25rem;
  }

  .reviews__tag {
    grid-row: 4;
    margin: 0.5rem 0 0;
  }

  .reviews__slider {
    margin-top: 2.5rem;
  }

  /* --- FAQ : en-tête au-dessus de la liste --- */
  .home-faq__inner {
    display: block;
  }

  .home-faq__head {
    margin-bottom: 2rem;
    padding-right: 0;
  }

  /* --- Footer : logo puis nav empilés --- */
  .site-footer__top {
    grid-template-columns: 1fr;
  }

  .site-footer__brand {
    grid-column: 1;
    border-right: none;
    border-bottom: 1px solid var(--hairline-on-dark);
    padding: 2rem var(--margin);
    justify-content: flex-start;
  }

  .site-footer__logo {
    width: min(60%, 14rem);
  }

  /* Pages sur 2 colonnes */
  .site-footer__nav {
    grid-column: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__nav-link {
    padding-block: 0.9rem;
    gap: 0.6rem;
  }

  /* Filet vertical entre les deux colonnes de pages */
  .site-footer__nav-link:nth-child(odd) {
    border-right: 1px solid var(--hairline-on-dark);
  }

  /* Contact seul sur sa ligne, aligné à gauche */
  .site-footer__nav-link:last-child {
    grid-column: 1 / -1;
    border-right: none;
  }

  .site-footer__nav-label {
    font-size: 1.05rem;
  }

  /* Contact et Réseaux côte à côte, Autres en dessous */
  .site-footer__bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__cell {
    min-height: 0;
    padding: 1.5rem var(--margin);
    border-bottom: none;
    border-right: 1px solid var(--hairline-on-dark);
  }

  .site-footer__cell:nth-child(2) {
    border-right: none;
  }

  .site-footer__cell--meta {
    grid-column: 1 / -1;
    border-top: 1px solid var(--hairline-on-dark);
    border-right: none;
  }

  .site-footer__tag {
    margin-bottom: 0.75rem;
  }

  .site-footer__copyright {
    text-align: left;
    padding-block: 0.75rem;
  }
}

@media (max-width: 900px) {
  /* --- Expertises : cards compactes, photo révélée dans la zone de scroll --- */
  .services-h__track {
    flex-direction: column;
    width: 100%;
    height: auto;
  }

  .services-h__pin {
    height: auto;
    overflow: visible;
  }

  .services-h__panel {
    width: 100% !important;
    border-right: none;
  }

  .services-h__panel--intro {
    height: auto;
    padding: 3rem var(--margin);
  }

  .services-h__intro-grid {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
  }

  .services-h__panel--service {
    height: 55svh;
    min-height: 20rem;
    padding: 1.75rem var(--margin) 2rem;
    border-top: 1px solid var(--hairline);
  }

  /* --- Spectre complet : titre d'abord, puis la liste --- */
  .services-h__also-grid {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
  }

  .services-h__also-main {
    order: -1;
  }

  .services-h__also-list {
    max-width: none;
    padding-left: 0;
  }

  /* --- Réalisations : même expérience épinglée que le desktop --- */
  .work-showcase__pin {
    display: block;
  }

  .work-showcase__mobile {
    display: none;
  }

  .work-showcase__inner {
    padding: 1rem var(--margin) 2rem;
    min-height: calc(100svh - var(--header-height));
    max-height: calc(100svh - var(--header-height));
    gap: 0.5rem;
    justify-content: flex-start;
    overflow: hidden;
  }

  .work-showcase__top {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  /* Barre de progression au-dessus du titre */
  .work-showcase__progress {
    order: -1;
    margin-bottom: 0.4rem;
  }

  .work-showcase__top-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  /* Titre en long, pleine largeur */
  .work-showcase__section-title {
    max-width: none;
    font-size: clamp(1.35rem, 5.8vw, 1.6rem);
  }

  /* Lien en or, discret (maquette) */
  .work-showcase .work-showcase__all {
    color: var(--gold);
    font-size: 0.85rem;
    padding-block: 0.2rem;
  }

  .work-showcase__stage {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
  }

  /* Compteur 01/03 dans l'anneau, entre la photo et le filet du cercle
     (déplacé dans le visual par scroll-zone.js) */
  .work-showcase__visual > .work-showcase__counter {
    position: absolute;
    left: 50%;
    top: calc(50% - (min(79vw, 19.5rem) + min(51vw, 12.5rem)) / 4);
    transform: translate(-50%, -50%);
    margin: 0;
    z-index: 2;
  }

  .work-showcase__counter-sep {
    margin-inline: 0.05rem;
  }

  .work-showcase__visual {
    order: -1;
    min-height: 0;
    padding-block: 0.75rem;
    /* Le cercle se centre dans tout l'espace libre */
    flex: 1;
    margin-top: 0;
  }

  /* Cercle agrandi */
  .work-showcase__arc {
    max-width: min(79vw, 19.5rem);
  }

  .work-showcase__media-frame {
    width: min(51vw, 12.5rem);
  }

  .work-showcase__hint {
    display: none;
  }

  /* Les 3 boutons projets du bas ne servent à rien sur mobile */
  .work-showcase__steps {
    display: none;
  }

  /* Nom du projet : gras, centré, plus bas, sous-titre collé,
     flèche cerclée plus grosse encore en dessous */
  .work-showcase__info {
    position: relative;
    min-height: 13.5rem;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    margin-top: 0;
  }

  .work-showcase__panel {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    gap: 0;
    padding-top: 0;
    padding-bottom: 0.5rem;
  }

  .work-showcase__panel .work-showcase__actions {
    margin-bottom: 0;
  }

  /* Nom + catégorie entre le cercle et le bouton, écart fixe
     avant le bouton (ratios de la maquette : ~63px / ~42px) */
  .work-showcase__title {
    margin: auto 0 0;
    max-width: none;
    font-weight: var(--fw-semibold);
    font-size: clamp(1.5rem, 6vw, 1.875rem);
  }

  .work-showcase__category {
    margin: 0.2rem 0 0;
  }

  .work-showcase__actions {
    margin-top: 2.6rem;
    align-items: center;
  }

  .work-showcase__actions .hf-btn {
    width: 6rem;
    height: 6rem;
    padding: 0;
    border-radius: var(--radius-full);
    background: var(--beige);
    color: var(--teal-dark);
    justify-content: center;
    gap: 0;
  }

  .work-showcase__actions .hf-btn .hf-btn__arrow {
    font-size: 1.6rem;
  }

  .work-showcase__actions .hf-btn > span:first-child {
    display: none;
  }
}

@media (max-width: 560px) {
  /* --- Hero : cartes du deck adaptées à l'écran étroit --- */
  .hero-fig__deck {
    width: 100%;
    height: 15rem;
  }

  .hero-fig__ctas {
    gap: 0.9rem;
  }

  /* Les avis restent lisibles */
  .reviews__quote p {
    font: var(--fw-regular) var(--fs-h4) / 1.55 var(--font-sans);
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .hero-fig {
    grid-template-columns: 1fr;
    padding-inline: 1.25rem;
  }

  .hero-fig__left {
    border-right: none;
  }

  .hero-fig__content {
    padding: 3rem 0 2.5rem;
  }

  .hero-fig__right {
    min-height: 24rem;
    margin-inline: calc(-1 * var(--margin));
    padding: 2rem var(--margin);
  }

  .hero-fig__deck {
    height: 15rem;
  }
}