/* ============================================
   MAIN/HOME.CSS — Styles specifiques a la page d'accueil
   Charge sur : front page uniquement
   Contient : sections home (hero, intro, method, geo, testimonial, signature)
   ============================================ */


/* --- 1. Hero --- */
.hero-home.section--immersion {
  position: relative;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  left: auto;
  right: auto;
  box-sizing: border-box;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  min-height: 100dvh;
  padding-top: max(var(--space-xl), env(safe-area-inset-top, 0px));
  padding-bottom: max(var(--space-xl), env(safe-area-inset-bottom, 0px));
  padding-left: max(clamp(16px, 4vw, 80px), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(16px, 4vw, 80px), env(safe-area-inset-right, 0px));
}

.hero-home.section--immersion .hero-immersion__display {
  max-width: min(750px, 100%);
  animation-delay: 0.3s;
}

.hero-home.section--immersion img.section__bg,
.hero-home.section--immersion picture.section__bg img,
.hero-home__media picture.section__bg img {
  object-fit: cover;
  object-position: center top;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  /* Ratio intrinsèque déclaré par breakpoint (les candidates srcset desktop
     et mobile n'ont pas le même ratio) — stabilise le layout pendant le
     décodage de l'image (CLS mobile 0.29 attribué à ce média). */
  aspect-ratio: 2730 / 1568;
}

@media (max-width: 1024px) {
  .hero-home__media picture.section__bg img {
    aspect-ratio: 1247 / 1292;
  }
}

.hero-home__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-home.hero-home--splash .hero-home__contrast-cap {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
  to bottom,
  rgba(12, 24, 30, 0.48) 0%,
  rgba(12, 24, 30, 0.22) 12%,
  rgba(12, 24, 30, 0.06) 24%,
  transparent 38%
  );
}

.hero-home.hero-home--splash .section__overlay {
  z-index: 2;
}

.hero-home.hero-home--splash .hero-home__splash-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.hero-home.hero-home--splash .section__content {
  z-index: 4;
}

.hero-home--splash {
  --hero-splash-ar-w: var(--hero-splash-ar-w-desk, 1920);
  --hero-splash-ar-h: var(--hero-splash-ar-h-desk, 913);
  --hero-splash-x: var(--hero-splash-x-desk, 50%);
  --hero-splash-y: var(--hero-splash-y-desk, 38%);
  --hero-splash-logo-w: var(--hero-splash-logo-w-desk, 26%);
}


@media (max-width: 1024px) {
.hero-home--splash {
  --hero-splash-ar-w: var(--hero-splash-ar-w-mob, 1080);
  --hero-splash-ar-h: var(--hero-splash-ar-h-mob, 1350);
  --hero-splash-x: var(--hero-splash-x-mob, 48%);
  --hero-splash-y: var(--hero-splash-y-mob, 40%);
  --hero-splash-logo-w: var(--hero-splash-logo-w-mob, 53.8%);
}

.hero-home.hero-home--splash .hero-home__contrast-cap {
  background: linear-gradient(
  to bottom,
  rgba(12, 24, 30, 0.5) 0%,
  rgba(12, 24, 30, 0.4) 7%,
  rgba(12, 24, 30, 0.32) 14%,
  rgba(12, 24, 30, 0.22) 22%,
  rgba(12, 24, 30, 0.12) 30%,
  rgba(12, 24, 30, 0.04) 40%,
  transparent 54%
  );
}

}

@media (max-width: 1024px) and (max-aspect-ratio: 10/16) {
.hero-home.hero-home--splash .hero-home__splash-marque {
  max-width: 80cqw;
}

}

.hero-home__splash-plane {
  position: absolute;
  inset: 0;
  container-type: size;
  container-name: hero-splash;
  pointer-events: none;
}

.hero-home__splash-sheet {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  aspect-ratio: var(--hero-splash-ar-w) / var(--hero-splash-ar-h);
  width: max(100cqw, calc(100cqh * var(--hero-splash-ar-w) / var(--hero-splash-ar-h)));
  height: max(100cqh, calc(100cqw * var(--hero-splash-ar-h) / var(--hero-splash-ar-w)));
}

.hero-home__splash-marque {
  position: absolute;
  left: var(--hero-splash-x);
  top: var(--hero-splash-y);
  transform: translate(-50%, -50%);
  width: var(--hero-splash-logo-w, 26%);
  max-width: 100%;
  line-height: 0;
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transition:
  opacity 0.45s var(--ease-editorial),
  visibility 0.45s var(--ease-editorial);
}

body.hero-splash-dismissed .hero-home--splash .hero-home__splash-marque {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.hero-home__splash-marque img,
.hero-home__splash-svg-frame {
  display: block;
  width: 100%;
  height: auto;
}

.hero-home.hero-home--cinematic .hero-home__media picture.section__bg img {
  opacity: 0;
  animation: heroCinematicPhotoFade 1.5s ease-out forwards;
}

.hero-home__splash-svg-frame {
  position: relative;
  aspect-ratio: 2621 / 833;
  max-width: 100%;
  line-height: 0;
  overflow: hidden;
}

.hero-home__splash-svg-clip {
  position: absolute;
  inset: 0;
  display: block;
  clip-path: inset(0 100% 0 0);
  opacity: 0;
  pointer-events: none;
}

.hero-home__splash-svg-clip.is-ready {
  opacity: 1;
  pointer-events: auto;
  animation: heroCinematicLogoClip 2.5s cubic-bezier(0.4, 0, 0.2, 1) 1s forwards;
}

.hero-home__splash-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-home--cinematic .hero-home__splash-svg:not(.is-ready) path,
.hero-home--cinematic .hero-home__splash-svg:not(.is-ready) polygon,
.hero-home--cinematic .hero-home__splash-svg:not(.is-ready) rect,
.hero-home--cinematic .hero-home__splash-svg:not(.is-ready) ellipse {
  visibility: hidden;
}

.hero-home--cinematic .hero-home__splash-svg path,
.hero-home--cinematic .hero-home__splash-svg polygon,
.hero-home--cinematic .hero-home__splash-svg rect,
.hero-home--cinematic .hero-home__splash-svg ellipse {
  fill: #e7dfdf;
  fill-opacity: 0;
  stroke: #faf7f3;
  stroke-width: 18;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.hero-home--cinematic .hero-home__splash-svg.is-ready path,
.hero-home--cinematic .hero-home__splash-svg.is-ready polygon,
.hero-home--cinematic .hero-home__splash-svg.is-ready rect,
.hero-home--cinematic .hero-home__splash-svg.is-ready ellipse {
  visibility: visible;
  animation:
  heroLogoStrokeDraw 2.5s cubic-bezier(0.4, 0, 0.2, 1) 1s forwards,
  heroLogoFillIn 0.55s ease-out 3.45s forwards,
  heroLogoStrokeHide 0.5s ease-out 3.45s forwards;
}

.hero-home.hero-home--cinematic.section--immersion .hero-immersion__display {
  animation: heroReveal 1s var(--ease-editorial) 3.5s forwards;
}

.hero-home.hero-home--cinematic.section--immersion .overline {
  animation: heroFadeIn 0.8s var(--ease-editorial) 3.8s forwards;
}

.hero-home.hero-home--cinematic.section--immersion .accent-line {
  animation: heroLine 0.6s var(--ease-editorial) 4.5s forwards;
}

body.page-vitrine .hero-home.hero-home--cinematic.section--immersion .overline {
  animation: heroFadeIn 0.8s var(--ease-editorial) 3.8s forwards;
}


@media (prefers-reduced-motion: reduce) {
.hero-home.hero-home--cinematic .hero-home__media picture.section__bg img {
  opacity: 1;
  animation: none;
}

.hero-home__splash-svg-clip {
  clip-path: inset(0 0 0 0) !important;
  opacity: 1 !important;
  animation: none !important;
}

.hero-home--cinematic .hero-home__splash-svg path,
  .hero-home--cinematic .hero-home__splash-svg polygon,
  .hero-home--cinematic .hero-home__splash-svg rect,
  .hero-home--cinematic .hero-home__splash-svg ellipse {
  visibility: visible !important;
  animation: none !important;
  fill-opacity: 1 !important;
  stroke: none !important;
  stroke-opacity: 0 !important;
  stroke-dashoffset: 0 !important;
}

.hero-home.hero-home--cinematic.section--immersion .hero-immersion__display {
  animation: heroReveal 1s var(--ease-editorial) 0.3s forwards;
}

.hero-home.hero-home--cinematic.section--immersion .overline {
  animation: heroFadeIn 0.8s var(--ease-editorial) 0.6s forwards;
}

body.page-vitrine .hero-home.hero-home--cinematic.section--immersion .overline {
  animation: heroFadeIn 0.8s var(--ease-editorial) 0.6s forwards;
}

.hero-home.hero-home--cinematic.section--immersion .accent-line {
  animation: heroLine 0.6s var(--ease-editorial) 1.3s forwards;
}

}

body.page-vitrine .hero-home.section--immersion {
  display: block;
  padding: 0;
}

body.page-vitrine .hero-home.section--immersion .section__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: auto;
  max-width: none;
  box-sizing: border-box;
  padding-top: max(var(--space-xl), env(safe-area-inset-top, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: max(clamp(16px, 4vw, 80px), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(16px, 4vw, 80px), env(safe-area-inset-right, 0px));
}

body.page-vitrine .hero-home.hero-home--splash.section--immersion .section__content {
  z-index: 4;
}

body.page-vitrine .hero-home.section--immersion .hero-home__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

body.page-vitrine .hero-home.section--immersion .accent-line {
  margin-left: auto;
  margin-right: auto;
}

body.page-vitrine .hero-home.section--immersion .overline {
  margin-bottom: 8px;
  animation-delay: 0.6s;
}

.section--immersion:not(.hero-home) .hero-immersion__display {
  font-size: var(--t-display);
}

@media (max-width: 1024px) {
.section--immersion:not(.hero-home) {
  min-height: 70svh;
  padding: var(--space-lg) 24px;
}

.hero-home.section--immersion {
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  min-height: 100dvh;
  padding-top: max(var(--space-lg), env(safe-area-inset-top, 0px));
  padding-bottom: max(var(--space-lg), env(safe-area-inset-bottom, 0px));
  padding-left: max(clamp(16px, 4vw, 80px), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(16px, 4vw, 80px), env(safe-area-inset-right, 0px));
}

body.page-vitrine .hero-home.section--immersion {
  padding: 0;
}

body.page-vitrine .hero-home.section--immersion .section__content {
  padding-top: max(var(--space-lg), env(safe-area-inset-top, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: max(clamp(16px, 4vw, 80px), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(16px, 4vw, 80px), env(safe-area-inset-right, 0px));
}

}

/* --- 2. Section respiration (overrides accueil) — base dans main/shared.css --- */
.section--respiration .home-intro__lead {
  font-family: var(--font-serif);
  font-size: var(--t-subheading);
  font-weight: 400;
  line-height: 1.5;
  color: var(--em-text);
  max-width: none;
  text-align: justify;
  text-align-last: center;
  hyphens: none;
}

.section--respiration .accent-line {
  margin-inline: auto; /* Centre horizontalement le bloc de 40px */
}

/* --- 3. Section expertises --- */
.home-expertises__grid {
  margin-top: var(--space-lg);
}

.home-expertises__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

/* --- 8. Section composants overrides --- */
#composants .section-header .lead,
#composants .card .lead,
#composants .stacking-card__description {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}


@media (min-width: 768px) {
#composants .section-header .lead {
  hyphens: auto;
  -webkit-hyphens: auto;
}

}

@media (max-width: 767px) {
.home-expertises__grid,
  .home-expertises__actions {
  display: none;
}

body.page-vitrine .hero-home.section--immersion .section__content {
  padding-top: max(var(--space-lg), env(safe-area-inset-top, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: 0;
  padding-right: 0;
}

body.page-vitrine .hero-home.section--immersion .hero-home__container {
  padding-inline: 0;
}

.hero-home.hero-home--cinematic.section--immersion .hero-immersion__display {
  max-width: 95%;
}

body.page-vitrine .hero-home.hero-home--cinematic.section--immersion .overline {
  max-width: 85%;
}

#composants .stacking-cards.home-expertises__mobile-cards[data-stacking-cards],
#ancrage .stacking-cards.home-expertises__mobile-cards[data-stacking-cards] {
  display: grid !important;
  gap: 0;
  margin-top: var(--space-lg);
  position: relative;
}

}

/* --- 4. Section methode --- */
#methode .sticky-layout__text h2 {
  font-family: var(--font-serif);
  font-size: var(--t-heading);
}

#methode .sticky-layout__text .text-container p {
  font-size: var(--t-body);
}

#methode .counter {
  font-size: var(--t-punch);
}

#methode .counter__label {
  font-size: var(--t-small);
}

@media (max-width: 767px) {
#methode.section--contenu {
  padding: 20px 0;
  padding-top: var(--space-lg);
  overflow-x: hidden;
}

#methode .container {
  padding-inline: 0;
}

#methode .sticky-layout {
  gap: 0;
}

#methode .sticky-layout__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 180px;
  margin: 0 0 16px;
  overflow: hidden;
}

#methode .sticky-layout__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

#methode .sticky-layout__text {
  padding-top: 0;
  padding-inline: 16px;
}

#methode .sticky-layout__text h2 {
  line-height: 1.25;
  margin-bottom: 8px;
}

#methode .sticky-layout__text .accent-line {
  margin-top: 8px;
  margin-bottom: 12px;
}

#methode .sticky-layout__text .text-container p {
  line-height: 1.5;
  margin: 0;
}

#methode .sticky-layout__text .text-container p + p {
  margin-top: 12px;
}

#methode .counter-row.counter-row--offset {
  margin-top: 16px;
  padding: 12px 8px;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

#methode .counter__label {
  line-height: 1.3;
  text-align: center;
}

}

@media (min-width: 768px) and (max-width: 1024px) {
#methode.section--contenu {
  padding-block: 32px;
  padding-inline: clamp(24px, 5vw, 80px);
  overflow-x: hidden;
  box-sizing: border-box;
}

#methode .container {
  max-width: 1200px;
  margin-inline: auto;
  width: 100%;
  padding-inline: 0;
  box-sizing: border-box;
}

#methode .sticky-layout {
  grid-template-columns: 1fr;
  gap: 0;
}

#methode .sticky-layout__image {
  width: 100%;
  max-width: 100%;
  justify-self: stretch;
  aspect-ratio: 16 / 9;
  margin: 0 0 20px;
  overflow: hidden;
}

#methode .sticky-layout__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

#methode .sticky-layout__text {
  justify-self: center;
  padding-top: 0;
  width: min(100%, 640px);
  max-width: 640px;
  margin-inline: 0;
  padding-inline: 0;
  box-sizing: border-box;
}

/* Texte titre + chapô : pleine largeur sous l’image (tablette uniquement) */
#methode .sticky-layout__text .text-container {
  max-width: 100%;
  width: 100%;
  margin-inline: 0;
}

#methode .sticky-layout__text h2 {
  margin-bottom: 10px;
}

#methode .sticky-layout__text .accent-line {
  margin-top: 0;
  margin-bottom: 16px;
}

#methode .counter-row.counter-row--offset {
  margin-top: 24px;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 100%;
}

#ancrage .home-geo__rail > .home-geo__intro p.lead,
#ancrage .home-geo__intro .lead {
  max-width: 100%;
  width: 100%;
}

}

@media (max-width: 767px) and (max-height: 670px) {
#methode.section--contenu {
  padding: 12px 0;
}

#methode .sticky-layout__image {
  max-height: 140px;
  margin-bottom: 12px;
}

#methode .sticky-layout__text h2 {
  margin-bottom: 6px;
}

#methode .sticky-layout__text .accent-line {
  margin: 6px 0 8px;
}

#methode .sticky-layout__text .text-container p {
  line-height: 1.45;
}

#methode .sticky-layout__text .text-container p + p {
  margin-top: 8px;
}

#methode .counter-row.counter-row--offset {
  margin-top: 12px;
  padding: 9px 6px;
}

}

/* --- 5. Section ancrage / geo --- */
@media (max-width: 1024px) {
#ancrage-visuel.section--immersion-image {
  height: 180px;
  min-height: 0;
  margin: 0;
  padding: 0;
}

#ancrage-visuel.section--immersion-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

}

@media (max-width: 767px) and (max-height: 670px) {
#ancrage-visuel.section--immersion-image {
  height: 120px;
}

}

.geo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
}

.geo-card {
  padding: var(--space-md);
  background: #ffffff;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.geo-card p {
  /* Aligné à gauche (pas justifié) : sur colonnes de ~240px le justify crée
     des rivières d'espace — lisibilité (WCAG 1.4.8) et rendu plus editorial. */
  text-align: left;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.geo-card p + p {
  margin-top: var(--space-sm, 1rem);
}

.geo-card__region {
  font-family: var(--font-serif);
  font-size: var(--t-subheading);
  font-weight: 600;
  font-style: normal;
  color: var(--em-primary);
  margin-bottom: var(--space-xs);
}

.geo-card__dept {
  font-family: var(--font-sans);
  font-size: var(--t-ui); /* 13px était trop petit pour du texte lu (audit typo) */
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--em-text-light);
  margin-bottom: var(--space-xs);
}

.geo-card__link {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  color: var(--em-primary);
  display: block;
  padding: 4px 0;
  transition: var(--transition-color);
}

.geo-card__link:hover {
  color: var(--em-primary-dark);
}

.geo-card p {
  font-family: var(--font-sans);
  font-size: var(--t-ui); /* paragraphes multi-lignes : 13px illisible confort, 14-15px fluide */
  color: var(--em-text-light);
  line-height: 1.6;
  margin: 0;
  max-width: none;
}

.geo-card p + p {
  margin-top: var(--space-sm);
}

.home-geo__rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--space-md);
  row-gap: 0;
  width: 100%;
}

.home-geo__rail > .home-geo__intro {
  grid-column: 1 / -1;
  width: auto;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: var(--space-lg);
  text-align: justify;
  hyphens: auto;
}

.home-geo__rail > .home-geo__intro .overline,
.home-geo__rail > .home-geo__intro h2,
.home-geo__rail > .home-geo__intro .lead {
  max-width: 100%;
}

.home-geo__rail > .home-geo__intro .lead {
  font-size: var(--t-body);
  max-width: 65%;
}

.home-geo__rail > .home-geo__intro h2 {
  font-size: var(--t-heading);
}

.home-geo__rail > .home-geo__grid {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}


@media (max-width: 767px) {
#ancrage.section--contenu {
  overflow: visible;
}

#ancrage .container,
  #ancrage .home-geo__rail,
  #ancrage .stacking-cards[data-stacking-cards] {
  overflow: visible;
}

.home-geo__rail {
  display: block;
  grid-template-columns: none;
}

.home-geo__rail > .home-geo__intro {
  padding-inline: 16px;
  margin-bottom: 16px;
}

.home-geo__rail > .home-geo__intro h2 {
  line-height: 1.25;
  margin-bottom: 8px;
}

.home-geo__rail > .home-geo__intro .accent-line {
  margin-top: 8px;
  margin-bottom: 12px;
}

.home-geo__rail > .home-geo__intro .lead {
  max-width: 100%;
  line-height: 1.5;
  margin: 0;
}

.home-geo__rail > .home-geo__grid,
  #ancrage .geo-grid.home-geo__grid {
  display: none;
}

.home-geo__rail > .home-geo__media,
  #ancrage .home-geo__media {
  display: none;
}

}

.home-geo__rail > .home-geo__media {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.home-geo__img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: min(72vh, 820px);
  object-fit: cover;
  margin: 0;
  padding: 0;
}


/* --- 6. Section signature overrides --- */
#signature .overline {
  font-size: var(--t-small);
}

#signature h2 {
  font-size: var(--t-heading);
}

#signature .sub-cta {
  font-size: var(--t-small);
}

#signature .btn-signature {
  font-size: var(--t-ui);
}

@media (max-width: 767px) {
#signature.section--signature {
  padding: 40px 20px;
}

#signature .overline {
  letter-spacing: 0.2em;
}

#signature h2 {
  line-height: 1.2;
}

#signature .accent-line {
  margin: 12px auto;
}

#signature .sub-cta {
  line-height: 1.5;
  margin-bottom: 20px;
}

#signature .btn-signature {
  width: 100%;
  padding: 14px 20px;
}

#temoignages.section--contenu {
  padding-top: var(--space-lg);
}

}

@media (max-width: 767px) and (max-height: 670px) {
#signature.section--signature {
  padding: 28px 16px;
}

#signature .overline {
  margin-bottom: 6px;
}


#signature .accent-line {
  margin: 9px auto;
}

#signature .sub-cta {
  margin-bottom: 15px;
}

#signature .btn-signature {
  padding: 11px 15px;
}

}

/* ═══════════════════════════════════════════════════════════
   Témoignages — citation éditoriale en fondu (.tcar)
   Un seul mécanisme desktop/mobile : slides empilées en grid 1/1,
   crossfade par .is-active (aucun glissement — registre Aman).
   Hauteur du bloc = plus grande slide → zéro JS, zéro layout shift.
   ═══════════════════════════════════════════════════════════ */

.tcar__kicker {
  font-family: var(--font-sans);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--em-primary);
  margin: 0 0 var(--space-lg);
}

.tcar__stage {
  display: grid;
}

.tcar__slide {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.65s var(--ease-editorial),
    visibility 0.65s var(--ease-editorial);
}

.tcar__slide.is-active {
  opacity: 1;
  visibility: visible;
}

.tcar__media {
  line-height: 0;
}

.tcar__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  max-height: 460px;
  object-fit: cover;
}

.tcar__quote {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.625rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.55;
  color: var(--em-text);
  margin: 0;
  text-wrap: pretty;
}

.tcar__rule {
  width: 40px;
  height: 1px;
  background: var(--em-accent-light);
  margin: var(--space-md) 0;
}

.tcar__name {
  font-family: var(--font-sans);
  font-size: var(--t-ui);
  font-weight: 600;
  color: var(--em-text);
  margin: 0 0 2px;
}

.tcar__meta {
  font-family: var(--font-sans);
  font-size: var(--t-ui);
  color: var(--em-text-light);
  margin: 0;
}

.tcar__google {
  display: inline-block;
  margin-top: var(--space-sm);
  font-family: var(--font-sans);
  font-size: var(--t-ui);
  color: var(--em-primary);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklch, var(--em-primary) 35%, transparent);
  transition: border-color 0.25s var(--ease-editorial), color 0.25s var(--ease-editorial);
}

.tcar__google:hover,
.tcar__google:focus-visible {
  color: var(--em-primary-dark);
  border-bottom-color: currentColor;
}

/* ── Pied : compteur 01 — 03, ligne de progression, flèches ── */

.tcar__footer {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 32px);
  margin-top: var(--space-lg);
}

.tcar__counter {
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  color: var(--em-text);
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

.tcar__counter-sep,
.tcar__counter-total {
  color: var(--em-text-light);
}

.tcar__progress {
  flex: 1 1 auto;
  height: 1px;
  background: color-mix(in oklch, var(--ivoire-900) 14%, transparent);
  overflow: hidden;
}

.tcar__progress-bar {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--em-primary);
  transform: scaleX(0.333);
  transform-origin: left center;
  transition: transform 0.5s var(--ease-editorial);
}

.tcar__nav {
  display: flex;
  gap: 8px;
}

.tcar__btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 1px solid color-mix(in oklch, var(--ivoire-900) 22%, transparent);
  border-radius: 0;
  color: var(--em-text);
  cursor: pointer;
  transition:
    border-color 0.25s var(--ease-editorial),
    color 0.25s var(--ease-editorial),
    background-color 0.25s var(--ease-editorial);
}

.tcar__btn:hover,
.tcar__btn:focus-visible {
  border-color: var(--em-primary);
  color: var(--em-primary);
}

/* ── Mobile : pile image 16/9 + carte, mêmes commandes ── */

@media (max-width: 1024px) {
  .tcar__kicker {
    margin-bottom: var(--space-md);
  }

  .tcar__slide {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
  }

  /* Objectif : toute la section (kicker → compteur) tient dans un viewport
     mobile (~780px utiles). Image panoramique, citation un cran plus bas,
     respirations resserrées. */
  .tcar__media img {
    aspect-ratio: 21 / 9;
    max-height: none;
  }

  .tcar__body {
    background: #faf8f5;
    border: 1px solid rgba(43, 41, 38, 0.08);
    border-top: none;
    padding: 16px 18px;
  }

  .tcar__quote {
    font-size: 1.125rem;
    line-height: 1.5;
  }

  .tcar__rule {
    margin: 12px 0;
  }

  .tcar__name {
    font-size: var(--t-ui);
  }

  .tcar__google {
    margin-top: 8px;
  }

  .tcar__footer {
    margin-top: 14px;
  }
}

/* Petits écrans bas (SE, paysage…) : on serre encore d'un cran. */
@media (max-width: 767px) and (max-height: 700px) {
  .tcar__kicker {
    margin-bottom: 12px;
  }

  .tcar__media img {
    aspect-ratio: 24 / 9;
  }

  .tcar__quote {
    font-size: 1.0625rem;
    line-height: 1.45;
  }

  .tcar__body {
    padding: 12px 16px;
  }
}

/* Swipe : le geste horizontal pilote le carrousel, le vertical scrolle. */
.tcar__stage {
  touch-action: pan-y;
}

/* Reduced motion : bascule instantanée. */
@media (prefers-reduced-motion: reduce) {
  .tcar__slide,
  .tcar__progress-bar {
    transition: none;
  }
}

/* No-JS : tous les témoignages empilés verticalement, commandes masquées. */
html.no-js .tcar__stage {
  display: block;
}

html.no-js .tcar__slide {
  opacity: 1;
  visibility: visible;
}

html.no-js .tcar__slide + .tcar__slide {
  margin-top: var(--space-lg);
}

html.no-js .tcar__footer {
  display: none;
}

/* --- 9. Divers --- */
/* heroFadeIn : @keyframes dans components.css (FUSION 2026-04-08) */
@keyframes heroCinematicPhotoFade {
to {
  opacity: 1;
}

}

@keyframes heroCinematicLogoClip {
from {
  clip-path: inset(0 100% 0 0);
}

to {
  clip-path: inset(0 0 0 0);
}

}

@keyframes heroLogoStrokeDraw {
to {
  stroke-dashoffset: 0;
}

}

@keyframes heroLogoFillIn {
to {
  fill-opacity: 1;
}

}

@keyframes heroLogoStrokeHide {
to {
  stroke-opacity: 0;
}

}

/* .sticky-layout : main/shared.css (FUSION 2026-04-08) */

/* (anciens styles dots supprimés — carrousel .tcar, cf. section Témoignages) */