/* ==========================================================================
   Operys — Homepage
   Reproduction de la page d'accueil, alignée sur la charte graphique
   officielle : 02_Pro/01_Work/20260728_charte-graphique/20260728_Charte
   graphique.md (source de vérité couleurs/typo/formes — 2026-08-05).
   ========================================================================== */

:root {
  /* ---- Tokens officiels (charte graphique A.3 / A.4 / B.3) ---- */
  --color-primary: #088277;
  --color-primary-dark: #00514F;
  --color-primary-light: #F2FAF8;
  --color-accent-mint: #00FF96;

  --color-gray-900: #181D27; /* texte primaire (jamais de noir pur) */
  --color-gray-700: #414651; /* texte secondaire */
  --color-gray-500: #717680; /* texte tertiaire */
  --color-gray-300: #D5D7DA; /* bordures */
  --color-gray-200: #E9EAEB; /* séparateurs légers */
  --color-white: #FFFFFF;

  --radius-sm: 4px;       /* petit (charte B.3) */
  --radius-default: 5px;  /* champs, composants (charte B.3) */
  --radius-btn: 12px;     /* boutons — demande explicite (remplace le 5px charte pour ce composant) */
  --radius-pill: 9999px;  /* bouton "Se connecter" — entièrement arrondi */
  --radius-lg: 8px;       /* grandes cartes, modales (charte B.3) */

  --font-primary: "Roboto", "Helvetica Neue", Arial, sans-serif; /* police unique — charte A.4 */
  --font-mono: "IBM Plex Mono", monospace; /* page "Le média" uniquement — badges/dates façon presse (reproduction aurora.tech/newsroom) */

  /* ---- Alias sémantiques utilisés dans le reste du fichier ---- */
  --color-text-heading: var(--color-primary-dark);
  --color-cta: var(--color-primary);
  --color-hero-bg: var(--color-primary-light);
  --color-text-muted: var(--color-gray-500);
  --color-text-muted-2: var(--color-gray-700);
  --color-text-dark: var(--color-gray-900);
  --color-card-border: var(--color-gray-300);
  --color-teal-dark: var(--color-primary-dark);
  --color-mint: var(--color-accent-mint);

  /* ---- Couleurs décoratives — hors périmètre de la charte (cartes témoignages) ---- */
  --color-card-pink: #FFF3F0;
  --color-card-blue: #F0FBFF;
  --color-card-green: #F0FFF0;
  --color-text-on-dark: #FFFFFF;
  --color-text-on-dark-soft: rgba(255, 255, 255, 0.65);

  /* ---- Formes décoratives — hors périmètre de la charte (hero marketing, pas de l'UI produit) ---- */
  --radius-hero: 130px;
  --radius-hero-mobile: 30px;
  --radius-video: 40px;
  --radius-video-mobile: 10px;

  /* ---- Layout : largeur de contenu alignée sur la charte (B.1,
     format desktop de référence 1280×720) ---- */
  --container-width: 1280px;

  /* ---- Système d'espacement des sections ----
     Y (vertical, rythme entre blocs) : multiples de 8px (échelle charte B.1).
     X (horizontal, écart entre colonnes d'une même rangée — hero copie/vidéo,
     cartes témoignages, blocs features) : valeur fixe, quel que soit le
     nombre de colonnes (1 à 4). Ne s'applique pas aux éléments hors grille
     de contenu (nav header, liste de logos en marquee, liens légaux). */
  --col-gap: 64px;
}

/* ---------- Reset minimal ---------- */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

body {
  font-family: var(--font-primary);
  color: var(--color-text-muted-2);
  font-size: 19px;
  line-height: 1.6;
  background: #fff;
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Accessible, invisible à l'écran (labels de formulaire notamment) */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-block;
  font-weight: 500;
  text-transform: capitalize;
  border: none;
  cursor: pointer;
}

.btn--cta {
  background: var(--color-cta);
  color: #fff;
  font-size: 21px;
  border-radius: var(--radius-btn);
  padding: 11px 26px 11px 20px;
  transition: background-color .3s, box-shadow .3s;
}
.btn--cta:hover {
  background: var(--color-primary-dark); /* état pressé — charte A.3 */
  box-shadow: 0 15px 30px -10px rgba(8, 130, 119, .5);
}

/* Bouton "Se connecter" — reproduction à l'identique du "Book a Demo"
   de swap-commerce.com (placeholder, à recolorer Operys ensuite). */
.btn--pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 47px;
  background: #a3fda7;
  color: #000;
  font-size: 15px;
  font-weight: 400; /* swap = Regular, pas 500 (hérité de .btn) */
  text-transform: none; /* "Se connecter", pas "Se Connecter" (annule le capitalize de .btn) */
  border-radius: var(--radius-pill);
  padding: 0 19px;
  transition: color .2s;
}
.btn--pill:hover { color: rgba(0, 0, 0, .6); }

/* ==========================================================================
   HEADER
   ========================================================================== */
/* Positions/tailles reproduites de swap-commerce.com (valeurs relevées
   dans leur CSS compilé) : hauteur header 85px, marges 24px→80px, logo
   60px→92px, boutons 47px de haut, pastille nav radius 10px.
   Couleurs : fond Primary Operys (charte A.3), texte blanc, bordure
   grise conservée. Le bouton "Se connecter" garde encore ses couleurs
   placeholder swap (à recolorer ensuite). */
:root {
  --swap-header-height: 85px;
  --swap-header-border: #ccc;
  --swap-margin: clamp(24px, 4vw, 80px);
  --swap-nav-text: #fff;
  --swap-hover-bg: rgba(255, 255, 255, .15);
  --swap-nav-radius: 10px;
  --swap-btn-height: 47px;
  --swap-logo-w-mobile: 78px;   /* 60px +30% */
  --swap-logo-w-desktop: 120px; /* 92px +30% */
}

.site-header {
  background: var(--color-primary);
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header__inner {
  /* Pas de max-width ici, volontairement : chez swap-commerce le header
     n'a aucun conteneur centré, juste le padding latéral, sur toute la
     largeur de l'écran (contrairement au reste du site). */
  display: flex;
  align-items: center;
  height: var(--swap-header-height);
  padding: 0 var(--swap-margin);
}

.site-header__brand {
  flex-shrink: 0;
  margin-right: calc(var(--swap-margin) / 2);
}

.site-header__logo { width: var(--swap-logo-w-desktop); height: auto; }

.site-header__nav {
  flex: 1 1 auto; /* occupe l'espace restant ; le contenu reste aligné à
                     gauche, juste après le logo — pas centré */
}

.site-header__nav ul {
  display: flex;
  gap: 12px; /* swap = span (padding 1em) + a (padding 6px) de chaque côté */
}

.site-header__nav a,
.site-header__demo-link {
  display: inline-flex;
  align-items: center;
  height: var(--swap-btn-height);
  font-weight: 400;
  font-size: 15px;
  color: var(--swap-nav-text);
  padding: 0 1em;
  border-radius: var(--swap-nav-radius);
  transition: background-color .2s;
}
.site-header__nav a:hover,
.site-header__demo-link:hover { background: var(--swap-hover-bg); }

.site-header__actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px; /* swap : pl-[14px] entre "Sign in" et "Book a Demo" */
}

.site-header__burger {
  display: none;
  margin-left: auto; /* reste à droite quand nav/login sont masqués en mobile */
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.site-header__burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--swap-nav-text);
}

.mobile-menu { display: none; }
.mobile-menu.is-open {
  display: block;
  background: var(--color-primary);
  border-top: 1px solid var(--swap-header-border);
}
.mobile-menu ul { padding: 1em 1.5em; }
.mobile-menu li {
  border-bottom: 1px solid rgba(255, 255, 255, .2);
}
.mobile-menu a {
  display: block;
  padding: 0.8em 0;
  font-weight: 400;
  font-size: 18px;
  color: var(--swap-nav-text);
}

@media (max-width: 1206px) {
  .site-header__inner { padding: 0 var(--swap-margin); }
  .site-header__logo { width: var(--swap-logo-w-mobile); }
  .site-header__nav { display: none; }
  .site-header__actions { display: none; }
  .site-header__burger { display: flex; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  background: var(--color-hero-bg);
  border-radius: 0 0 var(--radius-hero) var(--radius-hero);
  padding-top: 112px;
  padding-bottom: 80px;
}

.hero__inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

.hero__row {
  display: flex;
  align-items: center;
  gap: var(--col-gap);
}

.hero__copy,
.hero__video { flex: 1 1 0; } /* 2 colonnes de largeur identique, quel que soit le contenu */

.hero__title {
  color: var(--color-text-heading);
  font-size: 50px;
  font-weight: 700;
  line-height: 65px;
}
.hero__title .accent { color: var(--color-cta); }

.hero__subtitle {
  margin-top: 16px;
  color: var(--color-text-muted);
  font-size: 20px;
  font-style: italic;
}

.hero__cta { margin-top: 48px; }

.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-video);
  overflow: hidden;
  /* pas de margin-top ici : le centrage vertical (align-items: center sur
     .hero__row) doit rester symétrique entre le haut/bas de la vidéo et du
     texte. Le margin-top mobile ci-dessous est réintroduit spécifiquement
     pour l'écart après le CTA une fois empilé. */
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* En dehors du bloc coloré .hero — pas de fond, conteneur centré indépendant */
.hero__tagline {
  max-width: var(--container-width);
  margin: 80px auto 0;
  padding: 0 24px;
  text-align: center;
  color: var(--color-text-heading);
  font-size: 55px;
  font-weight: 700;
}
.hero__tagline .accent { color: var(--color-cta); }

/* Mot qui défile ("couvreurs" / "étancheurs" / "cordistes") — même typo/
   taille/couleur que le texte autour, uniquement le mot change en fondu +
   léger glissement vertical (JS dans script.js). */
.word-carousel {
  display: inline-block;
  text-align: center; /* largeur fixée en JS (mot le plus large) : le mot est
    centré dedans pour que le texte avant/après ("les" / "afin") ne bouge
    jamais quand le mot change */
}
.word-carousel__inner {
  display: inline-block;
  white-space: nowrap;
  transition: opacity .3s ease, transform .3s ease;
}
.word-carousel__inner--exit { opacity: 0; transform: translateY(-8px); }
.word-carousel__inner--enter { transition: none; opacity: 0; transform: translateY(8px); }

@media (prefers-reduced-motion: reduce) {
  .word-carousel__inner { transition: none; }
}

@media (max-width: 767px) {
  .hero { border-radius: 0 0 var(--radius-hero-mobile) var(--radius-hero-mobile); padding-top: 40px; padding-bottom: 8px; }
  .hero__row { flex-direction: column; align-items: stretch; gap: 24px; } /* empilé : écart devient vertical, pas la valeur --col-gap ; stretch pour éviter que chaque bloc se réduise à la largeur de son contenu */
  .hero__copy { text-align: center; }
  .hero__title { font-size: 42px; line-height: 1.2em; }
  .hero__subtitle { font-size: 17px; }
  .hero__cta { margin-top: 24px; font-size: 14px; }
  .video-embed { border-radius: var(--radius-video-mobile); margin-top: 24px; }
  .hero__tagline { font-size: 26px; line-height: 1.6em; margin-top: 40px; }
}

/* ==========================================================================
   TÉMOIGNAGES
   ========================================================================== */
.testimonials {
  max-width: var(--container-width);
  margin: 80px auto 0;
  padding: 0 24px;
}

.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--col-gap);
}

.testimonial-card {
  border-radius: var(--radius-lg); /* grande carte — charte B.3 */
  padding: 16px;
}
.testimonial-card--pink { background: var(--color-card-pink); }
.testimonial-card--blue { background: var(--color-card-blue); }
.testimonial-card--green { background: var(--color-card-green); }

.testimonial-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.testimonial-card__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  flex-shrink: 0;
}

.testimonial-card__role {
  color: var(--color-text-dark);
  font-size: 18px;
  font-weight: 700;
}
.testimonial-card__name {
  color: var(--color-text-dark);
  font-size: 15px;
}

.testimonial-card__quote {
  margin-top: 16px;
  color: var(--color-text-dark);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.2px;
}

.testimonial-card__foot {
  margin-top: 16px;
  display: flex;
  align-items: flex-end; /* étoiles et logo alignés par le bas */
  gap: 16px;
}
.testimonial-card__stars { font-size: 15px; }
.testimonial-card__screenshot {
  height: 32px;
  width: auto;
  margin-left: auto; /* collé à la marge droite de la carte */
  border-radius: var(--radius-sm);
}

@media (max-width: 767px) {
  .testimonials__grid { grid-template-columns: 1fr; gap: 24px; }
  .testimonial-card--hide-mobile { display: none; }
}

/* ==========================================================================
   LOGOS CLIENTS
   ========================================================================== */
.trust {
  max-width: var(--container-width);
  margin: 160px auto 0;
  padding: 0 24px;
  text-align: center;
}

.trust__title {
  color: var(--color-text-heading);
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 80px;
}

.trust__marquee {
  overflow: hidden;
  display: flex;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.trust__track {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 60px;
  padding-right: 60px;
  animation: trust-scroll 30s linear infinite;
}
.trust__track img { height: 96px; width: auto; object-fit: contain; }

@keyframes trust-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .trust__track { animation: none; }
}

@media (max-width: 767px) {
  .trust { margin-top: 80px; }
  .trust__title { font-size: 26px; line-height: 1.6em; margin-bottom: 40px; }
  .trust__track { gap: 32px; padding-right: 32px; }
}

/* ==========================================================================
   FEATURES (zig-zag image / texte)
   ========================================================================== */
.features {
  max-width: var(--container-width);
  margin: 160px auto 0;
  padding: 0 24px;
}

.features__title {
  text-align: center;
  color: var(--color-text-heading);
  font-size: 40px;
  font-weight: 700;
  line-height: 65px;
  margin-bottom: 80px;
}

.feature {
  display: flex;
  align-items: center;
  gap: var(--col-gap);
  margin-bottom: 120px;
}
.feature:last-child { margin-bottom: 0; }

.feature__media,
.feature__copy { flex: 1 1 50%; }

.feature__copy h3 {
  color: var(--color-cta);
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
}

.feature__copy p {
  margin-top: 8px;
  color: var(--color-text-muted-2);
  font-size: 20px;
}

@media (max-width: 767px) {
  .features { margin-top: 80px; }
  .features__title { font-size: 26px; line-height: 1.6em; letter-spacing: -0.2px; margin-bottom: 40px; }
  .feature { flex-direction: column; margin-bottom: 64px; gap: 24px; }
  .feature--reverse-mobile { flex-direction: column-reverse; }
  .feature__copy h3 { font-size: 24px; line-height: 1.3em; }
  .feature__copy p { font-size: 17px; text-align: justify; }
}

/* ==========================================================================
   CTA FINAL
   ========================================================================== */
.final-cta {
  margin-top: 160px;
  padding: 128px 24px;
  text-align: center;
  background: url("assets/images/cta-background.png") center center / cover no-repeat;
}

.final-cta h2 {
  color: #fff;
  font-size: 48px;
  font-weight: 700;
  line-height: 60px;
  margin-bottom: 32px;
}

@media (max-width: 767px) {
  .final-cta { margin-top: 80px; padding: 80px 24px 48px; }
  .final-cta h2 { font-size: 23px; line-height: 1.6em; margin-bottom: 24px; }
}

/* ==========================================================================
   BANDEAU LÉGAL (visible desktop uniquement, comme sur le site d'origine)
   ========================================================================== */
.legal-bar {
  display: none;
  background: var(--color-teal-dark);
  padding: 8px 24px 0;
}

.legal-bar__copyright {
  max-width: var(--container-width);
  margin: 0 auto;
  text-align: right;
  color: var(--color-text-on-dark);
  font-weight: 700;
  padding-bottom: 16px;
}

.legal-bar__links {
  max-width: var(--container-width);
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 24px;
}
.legal-bar__links a {
  color: var(--color-text-on-dark-soft);
  font-size: 13px;
  font-style: italic;
}
.legal-bar__links a:hover { text-decoration: underline; }

@media (min-width: 768px) {
  .legal-bar { display: block; }
}

/* ==========================================================================
   PAGE — NOUS CONTACTER
   Reproduction fidèle de la mise en page de runway.com/enterprise-contact
   (structure, grille de champs, hiérarchie typographique), recolorée en
   marque Operys. La vidéo de fond d'origine est remplacée par un diaporama
   en fondu des photos de compagnons — même zone, même rôle.
   ========================================================================== */
.contact2-split {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
}

@media (min-width: 1024px) {
  .contact2-split {
    flex-direction: row;
    padding: 20px;
    height: 100vh; /* pas de header du site sur cette page (comme Runway) ; hauteur fixe (pas min-height) pour que seul le formulaire scrolle */
    overflow: hidden;
  }
}

.contact2-visual {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  min-height: 560px;
  color: #fff;
}
@media (min-width: 1024px) {
  .contact2-visual { width: 50%; min-height: 0; }
}

.contact2-visual__bg { position: absolute; inset: 0; }
.contact2-visual__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.contact2-visual__bg img.is-active { opacity: 1; }
.contact2-visual__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 36, 36, .55); /* teal très foncé (charte D.1), pas noir pur */
}

.contact2-visual__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 32px;
}
@media (min-width: 1024px) { .contact2-visual__content { padding: 56px; } }

.contact2-visual__logo {
  display: inline-block;
  margin-top: -20px; /* moitié du padding (32px) puis +25% */
}
.contact2-visual__logo img { width: var(--swap-logo-w-mobile); height: auto; } /* même taille que le logo du header */
@media (min-width: 1024px) {
  .contact2-visual__logo { margin-top: -35px; } /* moitié du padding desktop (56px) puis +25% */
  .contact2-visual__logo img { width: var(--swap-logo-w-desktop); }
}

.contact2-visual__heading { margin-top: 0; }

.contact2-visual__heading h1 {
  font-size: 40px; /* même taille mobile/desktop (ajusté à la demande) */
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 24px;
  max-width: 480px;
}

.contact2-visual__heading p {
  font-size: 22px; /* même taille mobile/desktop (ajusté à la demande) */
  line-height: 1.3;
  max-width: 560px;
}

.contact2-visual__trust { margin-top: auto; padding-top: 64px; }
.contact2-visual__trust p {
  font-size: 14px;
  color: rgba(255, 255, 255, .7);
  margin-bottom: 24px;
}
.contact2-visual__logos { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.contact2-visual__logos img { height: 24px; width: auto; } /* logos déjà blancs, posés directement sur le fond sombre */

.contact2-form-section { background: #fff; border-radius: 12px; }
@media (min-width: 1024px) {
  .contact2-form-section { width: 50%; height: 100%; min-height: 0; overflow-y: auto; } /* min-height:0 indispensable pour qu'un enfant flex accepte de scroller au lieu de pousser la hauteur */
}

.contact2-form-inner {
  max-width: 680px;
  margin: 0 auto;
  padding: 40px 16px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
@media (min-width: 1024px) {
  .contact2-form-inner {
    padding: 21px 48px 56px; /* haut aligné avec le haut du logo (mesuré) ; bas = 56px identique à .contact2-visual__content */
    height: 100%;
    display: grid;
    grid-template-rows: auto auto 1fr; /* h2 / sous-titre / calendrier (remplit tout le reste) */
  }
}

.contact2-form-inner h2 {
  color: var(--color-text-heading);
  font-size: 28px;
  font-weight: 700;
}

.contact2-form-sub {
  margin-top: 8px;
  color: var(--color-text-muted);
  font-size: 15px;
}

/* Le calendrier Calendly occupe exactement la zone laissée par le titre/
   sous-titre — même zone que le formulaire qu'il remplace. */
.contact2-calendar {
  min-height: 650px;
  margin-top: 24px;
}
@media (min-width: 1024px) { .contact2-calendar { min-height: 0; } } /* la ligne 1fr de la grille pilote la hauteur */

.contact2-contact-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 0; /* écart total avec le h1 (48px) réduit de 50% -> 24px (margin-bottom du h1) */
}
.contact2-contact-method {
  /* format du bouton "Se connecter" du header (.btn--pill), noir/blanc, réduit de 30% */
  display: inline-flex;
  align-items: center;
  height: 33px; /* 47px - 30% */
  padding: 0 13px; /* 19px - 30% */
  border: none;
  border-radius: var(--radius-pill);
  background: #000;
  color: #fff;
  font-family: inherit;
  font-size: 11px; /* 15px - 30% */
  font-weight: 400;
  cursor: pointer;
  transition: background-color .15s;
}
.contact2-contact-method:hover { background: #262626; }
.contact2-contact-method.is-copied { background: var(--color-primary); } /* confirmation visuelle "Copié !" */

@media (max-width: 767px) {
  .contact2-visual__heading h1 { font-size: 32px; }
  .contact2-visual__heading p { font-size: 18px; }
}

/* ==========================================================================
   PAGE — LE MÉDIA
   Reproduction fidèle de la mise en page de aurora.tech/newsroom (hero
   éditorial, carrousel "À la une", barre de recherche/filtres, grille
   d'articles), recolorée en marque Operys. Tailles de texte, positions et
   effets (badges mono uppercase, zoom image au survol, carrousel à
   défilement horizontal) repris à l'identique du site d'origine ; classes
   préfixées `media-`.
   Contenu : la section "À la une" reprend telles quelles les images et
   les textes (non traduits) de la page d'origine, comme demandé — à
   remplacer par du vrai contenu éditorial Operys. Les articles de la
   grille en dessous sont des exemples de contenu Operys (textes/thèmes
   fictifs), à remplacer également.
   ========================================================================== */

/* ---- Hero éditorial ---- */
.media-hero { padding-top: 32px; }
@media (min-width: 1024px) { .media-hero { padding-top: 48px; } }

.media-hero__inner {
  position: relative; /* pour ancrer .media-hero__subtitle-wrap en absolu, cf. ci-dessous */
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 125px;
}
@media (min-width: 1024px) {
  .media-hero__inner { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 48px; padding-bottom: 240px; }
}

.media-hero__title {
  color: var(--color-text-heading);
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 95%;
}
@media (min-width: 1024px) {
  .media-hero__title { font-size: 75px; line-height: 97%; max-width: 700px; }
}

/* Sorti du flux (position absolute) pour descendre dans l'espace laissé par
   le padding-bottom de .media-hero__inner, jusqu'à 22px/48px au-dessus du
   trait gris — sans faire bouger le trait ni le titre, qui restent à leur
   place (seul le texte se déplace, à la demande). */
.media-hero__subtitle-wrap {
  position: absolute;
  left: 0;
  bottom: 22px; /* = écart trait gris → "À la une" (cf. .media-carousel) */
  max-width: 420px;
}
@media (min-width: 1024px) {
  .media-hero__subtitle-wrap {
    left: auto;
    right: 0;
    bottom: 48px;
    max-width: 320px;
  }
}

.media-hero__subtitle {
  color: var(--color-text-muted);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 110%;
}
@media (min-width: 1024px) { .media-hero__subtitle { font-size: 20px; } }

.media-hero__divider { height: 2px; background: var(--color-gray-200); }

/* ---- Carte article (partagée par le carrousel "À la une" et la grille
   "Articles" — largeur pilotée par le conteneur parent, cf. ci-dessous) ---- */
.media-card { display: block; width: 100%; }
.media-card[hidden] { display: none; }

.media-card__image-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: var(--color-gray-200);
  aspect-ratio: 1;
}
@media (min-width: 1024px) { .media-card__image-wrap { aspect-ratio: 4 / 3; } }

.media-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.23, 1, .32, 1);
}
.media-card:hover .media-card__image { transform: scale(1.1); }

.media-card__topic {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  background: #fff;
  color: var(--color-text-heading);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 120%;
  text-transform: uppercase;
  padding: 9px 12px;
  border-radius: 4px;
}
@media (min-width: 1024px) { .media-card__topic { top: 20px; left: 20px; } }

.media-card__content { padding-top: 12px; }
@media (min-width: 1024px) { .media-card__content { padding-top: 20px; } }

.media-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 11px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
@media (min-width: 1024px) { .media-card__meta { margin-bottom: 14px; } }

.media-card__title {
  color: var(--color-text-heading);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 120%;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .3s ease;
}
@media (min-width: 1024px) { .media-card__title { font-size: 20px; } }
.media-card:hover .media-card__title { color: var(--color-cta); }

/* ---- Carrousel "À la une" ---- */
.media-carousel {
  /* écart trait gris → haut de "À la une" = même valeur que l'écart
     bas de "À la une" → haut des images (padding-bottom de
     .media-carousel__header ci-dessous) */
  padding-top: 22px;
  padding-bottom: 48px;
}
@media (min-width: 1024px) { .media-carousel { padding-top: 48px; padding-bottom: 75px; } }

.media-carousel__header {
  display: flex;
  align-items: center;
  padding-bottom: 22px;
}
@media (min-width: 1024px) { .media-carousel__header { padding-bottom: 48px; } }

.media-carousel__title {
  color: var(--color-text-heading);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 100%;
}
@media (min-width: 1024px) { .media-carousel__title { font-size: 36px; letter-spacing: -0.03em; line-height: 96%; } }

/* ---- Article unique mis en avant (remplace le carrousel de 6) : photo
   large à gauche, tag+date+titre à droite. La photo occupe la hauteur que
   prenait auparavant photo+date+titre empilés, puisque le texte passe à
   côté au lieu d'être en dessous. ---- */
.media-featured {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (min-width: 1024px) {
  .media-featured { flex-direction: row; align-items: center; gap: 48px; }
}

.media-featured__image-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: var(--color-gray-200);
  aspect-ratio: 1; /* même ratio que .media-card__image-wrap (Articles) */
}
@media (min-width: 1024px) {
  .media-featured__image-wrap { flex: 1 1 0; aspect-ratio: 4 / 3; }
}

.media-featured__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.23, 1, .32, 1); /* même effet de zoom au survol que .media-card__image */
}
.media-featured__image-wrap:hover .media-featured__image { transform: scale(1.1); }

.media-featured__content { flex: 1 1 auto; }
@media (min-width: 1024px) { .media-featured__content { flex: 1 1 0; } } /* moitié/moitié, à équidistance du milieu */

.media-featured__title {
  margin-top: 11px;
  color: var(--color-text-heading);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 120%;
}
@media (min-width: 1024px) { .media-featured__title { margin-top: 14px; font-size: 32px; } }

/* ---- Barre de recherche / filtres (collée sous le header au scroll,
   comme sur aurora.tech) ---- */
.media-filters {
  position: sticky;
  top: var(--swap-header-height);
  z-index: 50;
  background: #fff;
  border-top: 2px solid var(--color-gray-200);
  border-bottom: 2px solid var(--color-gray-200);
  padding: 14px 0;
}
@media (min-width: 1024px) { .media-filters { padding: 10px 0; } }

.media-filters__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.media-filters__selects { display: flex; flex-wrap: wrap; gap: 12px; }

.media-filters__select select {
  appearance: none;
  height: 48px;
  min-width: 160px;
  padding: 0 36px 0 16px;
  border: 2px solid var(--color-gray-300);
  border-radius: 8px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23181D27' d='M6 8 0 1.5 1.5 0 6 5 10.5 0 12 1.5z'/%3E%3C/svg%3E") no-repeat right 14px center;
  color: var(--color-text-heading);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.media-filters__select select:focus { border-color: var(--color-primary); outline: none; }

.media-search {
  position: relative;
  height: 48px;
  flex: 1 1 220px;
  max-width: 320px;
  margin-left: auto;
}
.media-search__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}
.media-search__input {
  width: 100%;
  height: 100%;
  border: 2px solid var(--color-gray-200);
  border-radius: 8px;
  background: var(--color-gray-200);
  padding: 0 36px;
  font-family: inherit;
  font-size: 14px;
  color: var(--color-text-heading);
}
.media-search__input::placeholder { color: var(--color-text-muted); }
.media-search__input:focus { outline: none; border-color: var(--color-primary); background: #fff; }
.media-search__clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-gray-300);
  color: var(--color-text-heading);
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-search__clear[hidden] { display: none; }

/* ---- Grille "Articles" ---- */
.media-grid { padding: 48px 0 80px; }
@media (min-width: 1024px) { .media-grid { padding: 48px 0 120px; } }

.media-grid__header { padding-bottom: 22px; }
@media (min-width: 1024px) { .media-grid__header { padding-bottom: 48px; } }

.media-grid__title {
  color: var(--color-text-heading);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 100%;
}
@media (min-width: 1024px) { .media-grid__title { font-size: 36px; letter-spacing: -0.03em; line-height: 96%; } }

.media-grid__count {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  vertical-align: top;
}

.media-grid__items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px 20px;
}
@media (min-width: 1024px) { .media-grid__items { grid-template-columns: repeat(3, 1fr); } }

.media-grid__load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  min-width: 151px;
  margin: 48px auto 0;
  padding: 0 10px;
  background: var(--color-gray-200);
  border-radius: 8px;
  color: var(--color-text-heading);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 130%;
  transition: background-color .2s ease;
}
.media-grid__load-more svg { flex-shrink: 0; }
.media-grid__load-more:hover { background: var(--color-gray-300); }
.media-grid__load-more[hidden] { display: none; }

/* ==========================================================================
   PAGE — ARTICLE (page individuelle derrière une carte "À la une"/"Articles")
   Reproduction fidèle de la mise en page ET des couleurs d'un post Substack
   (colonne de lecture centrée ~680px, titre/sous-titre/interface en
   sans-serif, corps de texte en serif "Spectral" — la vraie police
   Substack, chargée via Google Fonts —, texte quasi noir, bouton d'action
   principal à l'orange de marque Substack). Non recolorée en marque Operys
   contrairement aux autres pages : demande explicite de fidélité totale
   (police + couleurs), y compris hors charte graphique du reste du site.
   Classes préfixées `post-`. Le premier article publié avec ce gabarit
   (/ressources/comment-ecrire-rapport-couvreur/) est un vrai contenu
   éditorial Operys — police/couleurs volontairement non recolorées malgré
   ça, cf. README.
   ========================================================================== */
:root {
  --post-serif: "Spectral", Georgia, "Times New Roman", serif; /* police de lecture Substack, uniquement pour le corps de l'article — le titre/sous-titre/interface restent en sans-serif, comme sur l'original */
  --post-measure: 680px; /* largeur de la colonne de lecture */
  --post-color-text: #363636;  /* texte quasi noir mesuré sur l'original (titre, corps, nom d'auteur) — pas le teal du reste du site */
  --post-color-accent: #FF6719; /* orange de marque Substack, repris tel quel sur le bouton d'action principal */
}

.post-header { max-width: var(--post-measure); margin: 0 auto; padding: 48px 24px 0; }

.post-title {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--post-color-text);
}
@media (min-width: 768px) { .post-title { font-size: 42px; } }

.post-subtitle {
  margin-top: 12px;
  font-size: 18px;
  line-height: 1.4;
  color: var(--color-text-muted);
}
@media (min-width: 768px) { .post-subtitle { font-size: 16px; } }

.post-byline { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
.post-byline__avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.post-byline__name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--post-color-text);
}
.post-byline__date { font-size: 13px; color: var(--color-text-muted); text-transform: uppercase; margin-top: 2px; }

.post-header__divider { margin-top: 17px; padding-bottom: 24px; border-bottom: 1px solid var(--color-gray-200); } /* margin-top -30% (avant : 24px) */

/* Cadre en haut d'article — même taille/ratio que l'ancien espace réservé
   vidéo du gabarit Substack (visible sur ce site, avant ce contenu, uniquement
   comme exemple) : la vidéo native Substack, non récupérable, y était
   remplacée par un placeholder ; ici c'est une vraie photo de couverture. */
.post-hero-image {
  max-width: var(--post-measure);
  margin: 36px auto 0; /* /2 à la demande (avant : 72px, hérité de l'espace réservé vidéo) */
  height: 260px;
  border-radius: 8px;
  overflow: hidden;
}
@media (min-width: 768px) { .post-hero-image { height: 400px; } }
.post-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.post-body {
  max-width: var(--post-measure);
  margin: 0 auto;
  padding: 32px 24px 64px; /* respiration en bas depuis la suppression du bandeau/commentaires/encart de fin */
  font-family: var(--post-serif);
  font-size: 18px;
  line-height: 1.65;
  color: var(--post-color-text);
}
@media (min-width: 768px) { .post-body { font-size: 19px; } }
.post-body p { margin-bottom: 24px; }
.post-body a { text-decoration: underline; text-underline-offset: 2px; }
.post-body p:last-child { margin-bottom: 0; }
.post-body__lead {
  display: block;
  margin: 40px 0 20px;
  font-family: var(--post-serif);
  font-size: 21px;
  font-weight: 700;
  color: var(--post-color-text);
}
.post-body img { width: 100%; height: auto; border-radius: 4px; margin: 8px 0 32px; display: block; }
.post-body blockquote {
  margin: 32px 0;
  padding-left: 20px;
  border-left: 3px solid var(--color-gray-300);
  font-style: italic;
} /* pas utilisé par le gabarit Substack d'origine (aucune citation dans
     l'article existant) — ajouté pour la page cas client (`/cas-clients/
     rene-delporte/`), qui reprend `.post-body` pour son corps de texte. */
.post-body blockquote cite {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-size: 0.8em;
  color: var(--color-text-muted-2);
} /* attribution ("— Nom, fonction") des citations du témoignage René
     Delporte — pas de citation attribuée dans le gabarit article d'origine. */
.post-body__model-preview { border-radius: 8px; } /* même arrondi que .post-hero-image, à la demande */
.post-body__signoff { margin-top: 16px; color: var(--color-text-muted-2); }
.post-body__divider { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--color-gray-200); }

/* Titres/listes d'un article de guide (plusieurs niveaux de sections) — pas
   utilisés par le gabarit Substack d'origine (qui n'avait que des leads en
   gras via .post-body__lead), ajoutés pour ce contenu-ci. */
.post-body h2 {
  margin: 40px 0 18px;
  font-family: var(--post-serif);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--post-color-text);
}
.post-body h2:first-child { margin-top: 0; }
.post-body h3 {
  margin: 32px 0 12px;
  font-family: var(--post-serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--post-color-text);
}
.post-body ul {
  margin: 0 0 24px;
  padding-left: 22px;
  list-style: disc; /* le reset global (ul{list-style:none}) désactive les puces par défaut */
}
.post-body li { margin-bottom: 10px; }
.post-body li:last-child { margin-bottom: 0; }

/* Encart "modèle téléchargeable" — le document réel n'existe pas encore :
   affiché explicitement comme "bientôt disponible" plutôt qu'un faux lien,
   même logique que l'ancien espace réservé vidéo. */
.post-download-card {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 8px 0 32px;
  padding: 20px 24px;
  background: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  font-family: var(--font-primary);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.post-download-card:hover {
  border-color: var(--color-gray-300);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
}
.post-download-card__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--color-gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--post-color-text);
}
.post-download-card__title { font-size: 15px; font-weight: 700; color: var(--post-color-text); }
.post-download-card__note { font-size: 13px; color: var(--color-text-muted); margin-top: 2px; }

/* Encart "S'abonner" façon widget de fin de post Substack — pas de
   cartouche/bordure sur l'original, simple texte centré dans le flux. */
.post-subscribe { margin-top: 32px; text-align: center; }
/* Bouton "Partager" extensible (icônes réseaux + copier le lien), reproduit
   en HTML/CSS/JS vanilla — équivalent du composant React fourni, adapté à
   la stack du site (pas de React/Tailwind/framer-motion ici). */
/* Couleurs en dur (palette Tailwind zinc/green), pas les tokens de marque
   du site : fidélité 100% au composant fourni, à l'identique du code
   source (bg-white, border-zinc-200, text-zinc-600, hover:bg-[couleur]/10
   par réseau, bg-green-50/text-green-500 à la copie). */
.social-button {
  position: relative;
  display: flex; /* pas inline-flex : évite que le bouton participe à une ligne
    de texte invisible dont la hauteur dépend du contenu interne (icône+texte
    vs icônes seules), ce qui faisait bouger le texte en dessous au dépliage */
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 48px;
  margin: 0 auto 24px;
  background: #ffffff;
  border: 1px solid #e4e4e7; /* zinc-200 */
  border-radius: 9999px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05); /* shadow-sm */
  overflow: hidden;
  cursor: pointer;
  transition: width .3s cubic-bezier(.4, 0, .2, 1), box-shadow .2s;
}
.social-button:hover { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1); } /* shadow-md */
.social-button.is-expanded { width: 178px; } /* px-1 (8) + 3×40 (icônes) + divider mx-1 w-px (9) + 40 (copier) */

.social-button__collapsed {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none; /* reset du style natif <button> (pas de reset global sur ce site) */
  background: none;
  padding: 0;
  cursor: pointer;
  color: #18181b; /* zinc-900 */
  font-family: var(--font-primary); /* sans-serif du site, pas le serif hérité de .post-body */
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.social-button__collapsed svg { width: 16px; height: 16px; flex-shrink: 0; }
.social-button.is-expanded .social-button__collapsed { display: none; }

.social-button__actions {
  display: flex;
  align-items: center;
  padding: 0 4px;
}
.social-button__actions[hidden] { display: none; }
.social-button__action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none; /* reset du style natif <button> pour le bouton "copier" (pas de reset global sur ce site) */
  background: none;
  padding: 0;
  cursor: pointer;
  border-radius: 9999px;
  color: #52525b; /* zinc-600 */
  transition: background-color .2s, color .2s;
}
.social-button__action svg { width: 20px; height: 20px; }
.social-button__action--twitter:hover { color: #1DA1F2; background: rgba(29, 161, 242, .1); }
.social-button__action--instagram:hover { color: #E1306C; background: rgba(225, 48, 108, .1); }
.social-button__action--linkedin:hover { color: #0A66C2; background: rgba(10, 102, 194, .1); }
.social-button__copy:hover { background: #f4f4f5; } /* zinc-100 — pas de changement de couleur de texte au survol dans l'original */
.social-button__copy.is-copied { color: #22c55e; background: #f0fdf4; } /* green-500 / green-50 */
/* L'attribut HTML `hidden` n'est pas pris en compte sur les éléments <svg>
   dans ce navigateur (son CSS UA ne cible que le HTML) : bascule via une
   classe à la place, pilotée par .is-copied sur le bouton. */
.social-button__icon-check { display: none; }
.social-button__copy.is-copied .social-button__icon-copy { display: none; }
.social-button__copy.is-copied .social-button__icon-check { display: block; }
.social-button__sep { width: 1px; height: 24px; margin: 0 4px; background: #e4e4e7; flex-shrink: 0; } /* zinc-200, mx-1 */

.post-subscribe__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--post-color-text);
}
.post-subscribe__desc {
  margin: 16px auto 0;
  max-width: 480px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-muted-2);
}

/* ==========================================================================
   PAGE — 404
   Structure/esprit repris de la référence fournie (21st.dev/@efferd/
   components/not-found-page-1 : gros "404" en gras, sous-titre discret,
   2 boutons de sortie) traduits en HTML/CSS vanilla avec la marque Operys
   (couleurs/rayons de bouton = tokens du site, pas de recolorisation
   spécifique demandée cette fois). Classes préfixées `notfound-`.
   ========================================================================== */
.notfound {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - var(--swap-header-height)); /* page centrée sur toute la hauteur visible, pas de bandeau légal sur cette page */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  text-align: center;
  /* Quadrillage régulier en fond (motif "papier millimétré", pas 4 lignes
     ponctuelles) — cellules carrées de 48px. */
  background-image:
    linear-gradient(to right, var(--color-gray-200) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-gray-200) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: center;
}
.notfound__inner {
  position: relative;
  z-index: 1;
  max-width: 380px;
  /* Marge visible entre le texte et le quadrillage : le bloc de contenu
     "efface" les lignes derrière lui (fond plein = couleur de page). */
  padding: 40px 32px;
  background: #fff;
}
.notfound__code {
  font-size: 96px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-text-dark);
}
@media (min-width: 768px) { .notfound__code { font-size: 140px; } }
.notfound__desc {
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.notfound__actions {
  margin-top: 32px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.notfound__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-btn);
  font-size: 15px;
  font-weight: 500;
  transition: background-color .2s, border-color .2s;
}
.notfound__btn--primary { background: var(--color-cta); color: #fff; }
.notfound__btn--primary:hover { background: var(--color-primary-dark); }
.notfound__btn--outline { background: #fff; color: var(--color-text-dark); border: 1px solid var(--color-gray-300); }
.notfound__btn--outline:hover { background: var(--color-gray-200); }

/* ==========================================================================
   PAGE — CAS CLIENTS
   Reproduction fidèle de la structure ET du style de
   swap-commerce.com/our-customers, recolorée en marque Operys (contrairement
   à la page article, aucune demande de fidélité de couleurs cette fois).
   Classes préfixées `customers-`. Contenu (26 cartes) repris tel quel comme
   exemple temporaire — cf. commentaire HTML pour le détail des
   simplifications (carrousel réduit à 1 item, cartes non cliquables,
   sections génériques hors sujet non reprises).
   ========================================================================== */
/* Fond dégradé vert pâle derrière le carrousel (mesuré sur l'original :
   blanc en haut, ~#f2ffe4 en bas du carrousel). */
.customers-green-bg { background: linear-gradient(to bottom, #ffffff, #f0ffe0); padding: 16px 0 40px; }
@media (min-width: 1024px) { .customers-green-bg { padding: 24px 0 64px; } }

/* ---- Carrousel "Customer stories" — reproduction fidèle (12 colonnes,
   image 8/12 en ratio 21:9 desktop / 16:9 mobile, contenu 4/12, tag en
   pastille contour, lien texte "Read more", flèches rondes + pastilles). ---- */
.customers-carousel { margin-top: 16px; }
@media (min-width: 1024px) { .customers-carousel { margin-top: 24px; } }

.customers-carousel__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 48px;
}
.customers-carousel__heading {
  color: var(--color-text-heading);
  font-size: 42px;
  line-height: 1.2em;
  font-weight: 700;
  letter-spacing: -0.02em;
}
@media (min-width: 768px) { .customers-carousel__heading { font-size: 50px; line-height: 65px; } }

.customers-carousel__slide { display: none; }
.customers-carousel__slide.is-active { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 768px) { .customers-carousel__slide.is-active { flex-direction: row; align-items: center; gap: 24px; } }

.customers-carousel__image-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: var(--color-gray-200);
  aspect-ratio: 3 / 2; /* largeur fixe, hauteur ajustée */
}
@media (min-width: 768px) { .customers-carousel__image-wrap { flex: 0 0 50%; } }
.customers-carousel__image { width: 100%; height: 100%; object-fit: cover; display: block; }
/* La photo de la carte "highlight" est un lien vers la page cas client
   (2ᵉ point d'accès, avec le lien "Découvrir le témoignage"). Voile noir
   au survol, identique aux cartes de la grille. */
a.customers-carousel__image-wrap { display: block; cursor: pointer; }
.customers-carousel__image-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}
a.customers-carousel__image-wrap:hover::after { opacity: .2; }

.customers-carousel__content { flex: 1 1 auto; }
@media (min-width: 768px) { .customers-carousel__content { padding-left: 24px; } }
.customers-carousel__tag {
  display: inline-block;
  border: 1px solid var(--color-gray-300);
  color: var(--color-text-heading);
  font-size: 13px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
}
.customers-carousel__title {
  color: var(--color-text-heading);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.customers-carousel__desc {
  color: var(--color-text-muted-2);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 16px;
}
.customers-carousel__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-heading);
  font-weight: 700;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.customers-carousel__link svg { flex-shrink: 0; }

.customers-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 48px 0 40px;
}
@media (min-width: 640px) { .customers-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .customers-grid { grid-template-columns: repeat(3, 1fr); padding: 64px 0 60px; } }

.customers-card {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 4 / 5; /* `aspect-4/5` chez swap — pas carré */
  background: var(--color-gray-200);
}
/* Seule la carte René Delporte est un lien (vers sa page cas client) ;
   les autres cartes restent des `<div>` non cliquables. */
a.customers-card--link { display: block; text-decoration: none; cursor: pointer; }
.customers-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Effet de hover repris de swap (`group-hover/card:opacity-20`) : un voile
   noir qui apparaît au survol, pas un zoom sur l'image. */
.customers-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}
.customers-card:hover::after { opacity: .2; }

.customers-card__tag {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
}

/* Dégradé + pied de carte (nom + flèche) — le dégradé est un ajout par
   rapport à l'original, cf. commentaire HTML. */
.customers-card__foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 16px;
  padding-top: 48px;
  background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent);
}
.customers-card__name {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.customers-card__arrow {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85); /* rond clair + flèche simple, comme l'original */
  color: var(--color-text-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Défilement de logos — même principe de boucle continue que
   .trust__marquee (home), mais logos/vitesse propres à swap (27 logos,
   plus petits, largeur variable). ---- */
.customers-marquee {
  max-width: var(--container-width);
  margin: 32px auto 0;
  padding: 0 24px 40px;
  text-align: center;
}
@media (min-width: 1024px) { .customers-marquee { padding-bottom: 60px; } }
.customers-marquee__title {
  color: var(--color-text-heading);
  font-family: var(--post-serif); /* police du titre "Vous avez aimé cet article ? — Partagez le" (héritée de .post-body sur la page article, pas la sans-serif du reste du site) */
  font-size: 18px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: 40px;
}
.customers-marquee__viewport {
  overflow: hidden;
  display: flex;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.customers-marquee__track {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 40px;
  padding-right: 40px;
  animation: customers-marquee-scroll 22.5s linear infinite;
}
.customers-marquee__track img { height: 56px; width: auto; object-fit: contain; }

@keyframes customers-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) { .customers-marquee__track { animation: none; } }
@media (max-width: 767px) { .customers-marquee__track { gap: 24px; padding-right: 24px; } }

/* ==========================================================================
   PAGE — CAS CLIENT (détail, /cas-clients/rene-delporte/)
   Vrai témoignage René Delporte (texte fourni par Thibault). Mise en page
   toujours inspirée de la structure réelle de
   swap-commerce.com/our-customers/hera (hero contenu+image en 2 colonnes,
   stats en liste, corps en lecture longue) — seule page à utiliser ces
   classes `case-` depuis la suppression de /cas-clients/sleb-etancheite/
   (mockup jamais réécrit, retiré sur demande). Le formulaire de contact
   latéral de swap n'est volontairement pas repris (sur demande) — remplacé
   par `.final-cta`, déjà utilisée ailleurs sur le site.
   ========================================================================== */
.case-hero { padding-top: 48px; padding-bottom: 93px; } /* écart bas de photo → 1er paragraphe augmenté de 50% (89px → ~134px) */
.case-hero__grid {
  display: flex;
  flex-direction: column-reverse;
  gap: 32px;
}
@media (min-width: 1024px) {
  /* Proportions mesurées par échantillonnage de pixels sur l'original
     (conteneur 1280px à 1440px de large) : contenu ~502px (39%), écart
     ~245px (19%), image ~532px (41,5%) — pas un simple 50/50, l'image
     est volontairement plus étroite que "le reste de la largeur".
     Image ramenée à 37,35% (= 41,5% × 0,9) : hauteur réduite de 10% en
     conservant le ratio, sur demande. `margin-left: auto` la garde collée
     à la marge droite malgré la largeur réduite. */
  /* 2 blocs distincts dans la colonne de gauche : le bloc logo+titre est
     aligné sur le haut de la photo ; le bloc des points est calé sur le
     bas de la photo (position absolute, hors flux). */
  .case-hero__grid { flex-direction: row; align-items: stretch; }
  .case-hero__content {
    flex: 0 0 52%; /* assez large pour que le titre tienne sur 2 lignes */
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  .case-hero__intro { margin-top: 40px; } /* même écart que celui sous le dernier point (bas du texte → bas de la photo) */
  .case-hero__stats { position: absolute; left: 0; right: 0; bottom: 0; }
  .case-hero__image-wrap { flex: 0 0 37.35%; margin-left: auto; }
}

.case-hero__logo { height: 48px; width: auto; object-fit: contain; margin-bottom: 20px; }
.case-hero__title {
  color: var(--color-text-heading);
  font-size: 30px;
  font-weight: 600; /* semi-bold (600 chargé en plus dans le <head> de cette page) */
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-bottom: 32px;
}
@media (min-width: 768px) { .case-hero__title { font-size: 36px; } }

.case-hero__stats { display: flex; flex-direction: column; }
.case-hero__stat { padding: 16px 0; border-top: 1px solid var(--color-gray-200); }
.case-hero__stat:first-child { border-top: none; padding-top: 0; }
.case-hero__stat dt { color: var(--color-text-heading); font-size: 17px; font-weight: 700; } /* traité comme un point à part entière (sa propre ligne + filet gris), police inchangée */
.case-hero__stat dd { margin: 0; color: var(--color-text-muted-2); font-size: 14px; line-height: 1.5; } /* retire l'indentation par défaut du <dd> — aligné à gauche sur le <dt> */

.case-hero__image-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm); /* `rounded` (Tailwind par défaut = 4px) chez swap, pas le radius "grande carte" */
  background: var(--color-gray-200);
  aspect-ratio: 4 / 3;
}
@media (min-width: 1024px) { .case-hero__image-wrap { aspect-ratio: 4 / 5; } }
.case-hero__image { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Le corps du cas client (citations, paragraphes, images) est entièrement
   porté par `.post-body`, réutilisée telle quelle depuis la page article —
   pas de classe `.case-body` dédiée. */

/* Éventail de 3 pages A4 légèrement superposées — remplace la dernière
   image du corps sur /cas-clients/rene-delporte/. Idée reprise du "fanned
   collage" de 21st.dev/@felipemenezes098/components/hero-10. Superposition
   via `flex` + marges négatives, inclinaison via `transform` avec
   `transform-origin: bottom center` (pivot facon jeu de cartes). Chaque
   élément a un ratio A4 portrait (1 / 1.414) ; l'image, elle-même en A4,
   est centrée dedans en `object-fit: contain` — jamais rognée. */
.case-fan {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin: 28px 0 44px;
  padding: 20px 0 8px;
}
.case-fan__item {
  flex: 0 0 38%;
  margin: 0;
  aspect-ratio: 1 / 1.414; /* √2 — format A4 portrait */
  border-radius: 6px;
  overflow: hidden;
  border: 5px solid #fff;
  background: #fff;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
  transform-origin: bottom center;
  transition: transform .35s ease;
}
.case-fan__item img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: top; }
.case-fan__item--left   { transform: rotate(-9deg); margin-right: -9%; z-index: 1; }
.case-fan__item--center { margin-bottom: 3%; z-index: 3; }
.case-fan__item--right  { transform: rotate(9deg); margin-left: -9%; z-index: 2; }
.case-fan:hover .case-fan__item--left   { transform: rotate(-13deg) translateX(-4%); }
.case-fan:hover .case-fan__item--center { transform: translateY(-4%); }
.case-fan:hover .case-fan__item--right  { transform: rotate(13deg) translateX(4%); }
@media (max-width: 600px) {
  .case-fan__item { flex-basis: 46%; border-width: 4px; }
  .case-fan__item--left  { transform: rotate(-7deg); margin-right: -12%; }
  .case-fan__item--right { transform: rotate(7deg); margin-left: -12%; }
}
@media (prefers-reduced-motion: reduce) {
  .case-fan__item, .case-fan:hover .case-fan__item { transition: none; }
}