*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --black: #0a0a0a;
      --white: #f5f5f3;
      --grey-light: #e8e8e6;
      --grey-mid: #6b6b67;
      --grey-dark: #3a3a38;
      --accent: #c8c8c4;
      --font-display: 'Bebas Neue', sans-serif;
      --font-serif: 'Cormorant Garamond', serif;
      --font-body: 'DM Sans', sans-serif;
    }

    html { scroll-behavior: smooth; }

    body {
      background: var(--white);
      color: var(--black);
      font-family: var(--font-body);
      font-weight: 300;
      overflow-x: hidden;
    }

    /* NAVBAR */
    nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 1000;
      background: var(--black);
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 40px;
      border-bottom: 1px solid var(--grey-dark);
    }

    .nav-logo {
      height: 36px;
      display: flex;
      align-items: center;
      cursor: pointer;
    }
    .nav-logo img {
      height: 100%;
      width: auto;
      object-fit: contain;
    }
    .nav-right {
      display: flex;
      align-items: center;
      gap: 36px;
    }

    .nav-link {
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 400;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--accent);
      text-decoration: none;
      transition: color 0.2s;
      position: relative;
    }
    .nav-link::after {
      content: '';
      position: absolute;
      bottom: -3px; left: 0;
      width: 0; height: 1px;
      background: var(--white);
      transition: width 0.3s ease;
    }
    .nav-link:hover { color: var(--white); }
    .nav-link:hover::after { width: 100%; }

    .lang-switcher {
      display: flex;
      align-items: center;
      gap: 8px;
      border-left: 1px solid var(--grey-dark);
      padding-left: 24px;
    }
    .lang-btn {
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 400;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--grey-mid);
      background: none;
      border: none;
      transition: color 0.2s;
      padding: 4px 0;
      cursor: pointer;
    }
    .lang-btn.active { color: var(--white); }
    .lang-btn:hover { color: var(--white); }
    .lang-sep { color: var(--grey-dark); font-size: 10px; }

    /* HERO */
    .hero {
      height: 100vh;
      background: var(--white);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 64px 0 240px;
      position: relative;
    }

    .hero-inner {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      animation: heroFade 1.2s cubic-bezier(0.23,1,0.32,1) both;
    }

    @keyframes heroFade {
      from { opacity: 0; transform: translateY(24px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .hero-logo-wrap {
      width: 70vw;
      max-width: 900px;
      aspect-ratio: 3/1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .hero-logo-wrap img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    .hero-tagline-wrap {
      position: absolute;
      bottom: 100px;
      left: 0;
      right: 0;
      text-align: center;
      padding: 0 40px;
      animation: heroFade 1.4s 0.2s cubic-bezier(0.23,1,0.32,1) both;
    }

    .hero-tagline {
      font-family: var(--font-serif);
      font-size: clamp(17px, 1.7vw, 21px);
      font-weight: 300;
      font-style: italic;
      letter-spacing: 0.08em;
      color: var(--grey-dark);
      text-align: center;
      line-height: 1.6;
      width: 100%;
    }

    /* SECTION TITLES */
    .section-label {
      font-size: 11px;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--grey-mid);
      margin-bottom: 12px;
    }

    /* OFFERS SECTION */
    .offers-section {
      background: var(--white);
      padding: 50px 40px 110px;
      position: relative;
    }

    .offers-header {
      text-align: center;
      margin-bottom: 50px;
    }

    .offers-title {
      font-family: var(--font-display);
      font-size: clamp(32px, 4.5vw, 56px);
      letter-spacing: 0.08em;
      color: var(--black);
      line-height: 1;
    }

    .offers-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 48px;
      max-width: 1400px;
      margin: 0 auto;
    }

    /* ===== Cadre commun (parcours 01+02 ET offre 03) : sans bordure ni padding ===== */
    .offer-frame {
      position: relative;
    }
    .offer-frame::before {
      content: attr(data-frame-label);
      position: absolute;
      top: -28px;
      left: 50%;
      transform: translateX(-50%);
      color: var(--grey-dark);
      font-family: var(--font-display);
      font-size: 13px;
      letter-spacing: 0.12em;
      white-space: nowrap;
      text-transform: uppercase;
    }

    /* ===== PARCOURS 01 + 02 : Grille interne du parcours ===== */
    .offer-pair {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      position: relative;
    }
    /* Cartes 01 et 02 collées, sans découpe sur leur géométrie */
    .offer-pair .offer-card:first-child,
    .offer-pair .offer-card:last-child {
      clip-path: none;
    }
    /* Séparateur fin entre les cartes 01 et 02 */
    .offer-pair-sep {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 4px;
      background: rgba(255,255,255,1);
      z-index: 5;
      pointer-events: none;
    }

    /* ===== Carte 03 : bande horizontale dans son propre cadre ===== */
    .offer-card.offer-standalone {
      aspect-ratio: auto;
      /* Hauteur fixe qui contient déjà toute la description : aucune animation de taille,
         donc le survol est aussi fluide que les cartes 01/02 (seule la description se révèle,
         sans jamais redimensionner la carte ni recalculer le filtre de l'image). */
      height: max(28vh, 300px);
      min-height: 28vh;
    }
    /* (Plus d'agrandissement au survol : la carte garde une taille fixe, comme 01/02.) */
    .offer-standalone .offer-overlay {
      background: linear-gradient(to right, rgba(10,10,10,0.94) 0%, rgba(10,10,10,0.88) 35%, rgba(10,10,10,0.5) 65%, rgba(10,10,10,0.1) 100%);
      justify-content: center;
      align-items: flex-start;
      padding: 48px 56px;
    }
    .offer-card.offer-standalone:hover .offer-overlay {
      background: linear-gradient(to right, rgba(10,10,10,0.96) 0%, rgba(10,10,10,0.9) 35%, rgba(10,10,10,0.55) 65%, rgba(10,10,10,0.15) 100%);
    }
    /* Contraindre le contenu textuel de la bande à la moitié gauche */
    .offer-standalone .offer-number,
    .offer-standalone .offer-title,
    .offer-standalone .offer-cta {
      max-width: 58%;
    }
    /* Sur la bande horizontale, la description est cachée par défaut et apparaît au hover (comme 01/02).
       Plus large + interligne resserré => moins de lignes => le bandeau grandit le moins possible.
       Ces réglages n'affectent que le survol (au repos la description est masquée). */
    .offer-standalone .offer-desc {
      max-width: 620px;
      line-height: 1.5;
      margin-bottom: 18px;
    }
    .offer-card.offer-standalone:hover .offer-desc {
      max-height: 200px;
      opacity: 1;
    }
    .offer-standalone .offer-number {
      font-size: 64px;
      margin-bottom: -16px;
    }

    .offer-card {
      position: relative;
      overflow: hidden;
      background: var(--black);
      aspect-ratio: 1/1;
      cursor: pointer;
    }
    /* Cartes du parcours 01/02 : hauteur fixe en vh pour tenir dans l'écran sans aspect-ratio */
    .offer-pair .offer-card {
      aspect-ratio: auto;
      height: 42vh;
      min-height: 320px;
    }

    .offer-img-placeholder {
      width: 100%;
      height: 100%;
      background: var(--grey-dark);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }
    .offer-img-placeholder::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        repeating-linear-gradient(
          45deg,
          transparent,
          transparent 40px,
          rgba(255,255,255,0.02) 40px,
          rgba(255,255,255,0.02) 41px
        );
    }
    .offer-img-placeholder span {
      font-family: var(--font-display);
      font-size: 11px;
      letter-spacing: 0.3em;
      color: var(--grey-dark);
      text-transform: uppercase;
    }

    /* ====== IMAGES DES OFFRES ======
       Pour afficher une vraie image sur une carte, il suffit de renseigner
       la variable --offer-img dans l'attribut style de la carte "offer-card"
       correspondante (voir plus bas dans le HTML, repères [IMAGE OFFRE 01/02/03]).
       Tant que --offer-img n'est pas renseignée, le placeholder gris reste affiché.
       L'image hérite automatiquement du noir & blanc et du zoom au survol. */
    .offer-card[style*="--offer-img"] .offer-img-placeholder {
      background-image: var(--offer-img);
      background-size: cover;
      background-position: center;
      filter: grayscale(100%) contrast(1.1);
      transition: transform 0.8s cubic-bezier(0.23,1,0.32,1), filter 0.5s ease;
    }
    /* Quand une image est présente, on masque les rayures et le texte du placeholder */
    .offer-card[style*="--offer-img"] .offer-img-placeholder::before,
    .offer-card[style*="--offer-img"] .offer-img-placeholder span {
      display: none;
    }
    .offer-card[style*="--offer-img"]:hover .offer-img-placeholder {
      transform: scale(1.05);
      filter: grayscale(0%) contrast(1.05);
    }

    .offer-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.3) 50%, transparent 100%);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 40px 32px;
      transition: background 0.4s ease;
    }

    .offer-card:hover .offer-overlay {
      background: linear-gradient(to top, rgba(10,10,10,0.98) 0%, rgba(10,10,10,0.5) 60%, rgba(10,10,10,0.1) 100%);
    }

    .offer-number {
      font-family: var(--font-display);
      font-size: 64px;
      color: rgba(255,255,255,0.42);
      line-height: 1;
      margin-bottom: -16px;
      transition: color 0.3s;
    }
    .offer-title {
      font-family: var(--font-display);
      font-size: clamp(22px, 2.5vw, 32px);
      letter-spacing: 0.1em;
      color: var(--white);
      line-height: 1.1;
      margin-bottom: 14px;
    }

    .offer-desc {
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 300;
      line-height: 1.7;
      color: var(--accent);
      margin-bottom: 28px;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.5s cubic-bezier(0.23,1,0.32,1), opacity 0.4s;
      opacity: 0;
    }
    .offer-card:hover .offer-desc { max-height: 120px; opacity: 1; }

    .offer-cta {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-size: 10px;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--white);
      text-decoration: none;
      font-weight: 400;
      transition: gap 0.3s ease;
    }
    .offer-cta .cta-arrows {
      display: inline-flex;
      align-items: center;
      gap: 1px;
      transition: transform 0.3s ease;
    }
    .offer-cta .cta-arrows svg {
      width: 9px;
      height: 12px;
      fill: currentColor;
    }
    .offer-card:hover .offer-cta { gap: 18px; }
    .offer-card:hover .offer-cta .cta-arrows { transform: translateX(4px); }

    /* ABOUT STRIP */
    .about-strip-title {
      font-family: var(--font-display);
      font-size: clamp(32px, 4vw, 56px);
      letter-spacing: 0.08em;
      color: var(--white);
      line-height: 1.1;
      margin-bottom: 28px;
    }

    .about-strip-text {
      font-family: var(--font-serif);
      font-size: 16px;
      font-weight: 300;
      line-height: 1.9;
      color: var(--accent);
      margin-bottom: 36px;
    }

    /* ABOUT STRIP WRAPPER */
    .about-strip-wrapper {
      background: var(--black);
    }

    /* FOOTER */
    footer {
      background: var(--black);
      border-top: 1px solid var(--grey-dark);
      padding: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .footer-logo {
      font-family: var(--font-display);
      font-size: 16px;
      letter-spacing: 0.25em;
      color: var(--grey-mid);
    }

    .footer-copy {
      font-size: 10px;
      letter-spacing: 0.12em;
      color: var(--grey-mid);
    }

    .footer-links {
      display: flex;
      gap: 24px;
    }
    .footer-links a {
      font-size: 10px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--grey-mid);
      text-decoration: none;
      transition: color 0.2s;
    }
    .footer-links a:hover { color: var(--white); }

    /* PAGES (hidden by default) */
    .page {
      display: none;
      min-height: 100vh;
      padding-top: 64px;
      background: var(--white);
    }
    .page.active { display: block; }

    .page-hero {
      background: var(--black);
      padding: 54px 40px 43px;
      position: relative;
      overflow: hidden;
    }
    .page-hero::after {
      content: attr(data-num);
      position: absolute;
      right: 40px;
      top: 50%;
      transform: translateY(-50%);
      font-family: var(--font-display);
      font-size: 180px;
      color: rgba(255,255,255,0.03);
      line-height: 1;
      pointer-events: none;
    }

    .page-back {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 10px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--grey-mid);
      text-decoration: none;
      margin-bottom: 8px;
      transition: color 0.2s, gap 0.3s;
      background: none;
      border: none;
    }
    .page-back:hover { color: var(--white); gap: 16px; }
    .page-back::before { content: '←'; font-size: 14px; }

    .page-title {
      font-family: var(--font-display);
      font-size: clamp(40px, 7vw, 96px);
      letter-spacing: 0.08em;
      color: var(--white);
      line-height: 1;
      margin-bottom: 20px;
    }

    /* Numéro au-dessus du titre (esprit des cartes d'accueil), pour les pages projet */
    .page-hero-number {
      font-family: var(--font-display);
      font-size: clamp(34px, 5vw, 60px);
      letter-spacing: 0.05em;
      color: rgba(255,255,255,0.42);
      line-height: 1;
      margin-bottom: -2px;
    }

    .page-subtitle {
      font-family: var(--font-serif);
      font-size: 22px;
      font-style: italic;
      font-weight: 300;
      color: var(--grey-mid);
      max-width: 520px;
      line-height: 1.7;
    }
    /* Mise en avant de la phrase d'accroche finale du sous-titre portfolio */
    .subtitle-highlight {
      color: var(--white);
      font-weight: 400;
    }

    .page-content {
      padding: 100px 40px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .deliverables-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 2px;
      margin-top: 80px;
    }

    .deliverable-item {
      background: var(--black);
      padding: 44px 32px;
      transition: background 0.3s;
    }
    .deliverable-item:hover { background: var(--grey-dark); }

    .deliverable-icon {
      font-family: var(--font-display);
      font-size: 28px;
      color: var(--grey-mid);
      margin-bottom: 12px;
      letter-spacing: 0.1em;
    }

    .deliverable-label {
      font-size: 11px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--white);
      margin-bottom: 8px;
    }

    .deliverable-text {
      font-size: 14px;
      line-height: 1.75;
      color: #a8a8a4;
      font-weight: 300;
    }

    /* PROCESS TIMELINE : horizontal frieze */
    .process-timeline {
      margin-top: 48px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
    }
    .timeline-intro {
      font-size: 14px;
      line-height: 1.7;
      color: var(--grey-dark);
      font-weight: 300;
      max-width: 640px;
      margin: 20px 0 12px;
    }
    .timeline-week {
      position: relative;
      padding: 0 28px 0 0;
      transition: transform 0.3s ease;
    }
    .timeline-week:not(:last-child) {
      border-right: 1px solid var(--grey-light);
      padding-left: 0;
    }
    .timeline-week:not(:first-child) { padding-left: 28px; }
    .timeline-week:hover { transform: translateY(-4px); }
    .timeline-marker {
      display: flex;
      align-items: baseline;
      gap: 12px;
      padding-top: 28px;
      margin-bottom: 20px;
      position: relative;
    }
    .timeline-marker::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 36px;
      height: 2px;
      background: var(--black);
    }
    .timeline-week-num {
      font-family: var(--font-display);
      font-size: 38px;
      line-height: 0.85;
      color: var(--black);
      letter-spacing: 0.04em;
    }
    .timeline-week-label {
      font-size: 11px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--grey-mid);
    }
    .timeline-content { padding-top: 0; }
    .timeline-title {
      font-size: 12px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--black);
      margin-bottom: 16px;
      line-height: 1.4;
    }
    .timeline-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .timeline-list li {
      font-size: 13px;
      line-height: 1.55;
      color: var(--grey-dark);
      font-weight: 300;
      padding-left: 16px;
      position: relative;
    }
    .timeline-list li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 8px;
      width: 6px;
      height: 1px;
      background: var(--grey-mid);
    }
    /* Optional phase: lighter marker + a small "optionnel" tag */
    .timeline-week.is-optional .timeline-marker::before { background: var(--grey-mid); }
    .timeline-week.is-optional .timeline-week-num { color: var(--grey-mid); }
    .timeline-tag {
      display: inline-block;
      font-size: 8px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--grey-mid);
      border: 1px solid var(--grey-light);
      padding: 3px 7px;
      margin-bottom: 12px;
    }

    /* ====== IMAGES DE CONTENU (page offre) ======
       Pour afficher une vraie image, renseigne --fig-img dans le style de la figure :
         style="--fig-img: url('images/offre-1-sketches.jpg');"
       Repères cherchables dans le HTML : [IMAGE OFFRE 01 - SKETCHES], [IMAGE OFFRE 01 - RENDER],
       [IMAGE OFFRE 02 - RENDER], [IMAGE OFFRE 03 - VUE D'ENSEMBLE].
       Tant que --fig-img n'est pas renseignée, le placeholder gris reste affiché. */
    .content-figure {
      margin: 56px 0 8px;
    }
    .figure-render { margin-top: 120px; }
    .content-figure .figure-frame {
      width: 100%;
      background: var(--grey-dark);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    /* ratios par type */
    .figure-pano .figure-frame { aspect-ratio: 16 / 6; }
    .figure-render .figure-frame { aspect-ratio: 16 / 8; }
    .content-figure .figure-frame::before {
      content: '';
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(45deg, transparent, transparent 40px, rgba(255,255,255,0.02) 40px, rgba(255,255,255,0.02) 41px);
    }
    .content-figure .figure-frame span {
      font-family: var(--font-display);
      font-size: 12px;
      letter-spacing: 0.3em;
      color: var(--grey-mid);
      text-transform: uppercase;
      position: relative;
      z-index: 1;
    }
    .content-figure[style*="--fig-img"] .figure-frame {
      background-image: var(--fig-img);
      background-size: cover;
      background-position: center;
    }
    .content-figure[style*="--fig-img"] .figure-frame::before,
    .content-figure[style*="--fig-img"] .figure-frame span { display: none; }
    .figure-caption {
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--grey-mid);
      margin-top: 14px;
    }

    /* ====== PAGE PROJET : MotoGP '28 — Smooth Aero ======
       Réutilise le système de figures (--fig-img). Ajoute : une figure verticale 3/4,
       un bloc texte + visuel côte à côte, et une galerie horizontale de rendus.
       Tant que --fig-img n'est pas renseignée, le placeholder gris labellisé reste affiché. */

    /* Figure verticale 3/4 (croquis à côté d'un texte) */
    .figure-portrait .figure-frame { aspect-ratio: 3 / 4; }

    /* Figure hero 16/9 (vue de profil en tête de page projet) */
    .figure-hero .figure-frame { aspect-ratio: 16 / 9; }

    /* Bloc texte + visuel côte à côte */
    .concept-split {
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      gap: 56px;
      align-items: center;
      margin-top: 64px;
    }
    .concept-split .content-figure { margin: 0; }
    .concept-split-text p {
      font-family: var(--font-body);
      font-size: 16px;
      font-weight: 300;
      line-height: 1.8;
      color: var(--grey-dark);
      margin-top: 14px;
    }
    .concept-split-text strong { font-weight: 500; color: var(--black); }

    /* Galerie horizontale de rendus (bas de page) */
    .concept-gallery {
      display: flex;
      gap: 16px;
      margin-top: 28px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      padding-bottom: 14px;
      -webkit-overflow-scrolling: touch;
    }
    .concept-gallery::-webkit-scrollbar { height: 4px; }
    .concept-gallery::-webkit-scrollbar-thumb { background: var(--grey-light); }
    .concept-gallery-item {
      flex: 0 0 auto;
      scroll-snap-align: start;
    }
    /* Rendus cliquables : curseur + focus clavier */
    .concept-gallery-item[style*="--fig-img"] { cursor: pointer; }
    .concept-gallery-item:focus-visible { outline: 2px solid var(--black); outline-offset: 4px; }
    .concept-gallery-frame {
      height: clamp(220px, 38vh, 360px);
      width: auto;
      aspect-ratio: 3 / 4;            /* face + perspective : même hauteur, format 4/3 vertical (portrait) */
      background: var(--grey-dark);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: filter .35s ease;
    }
    /* Rendu profil : même hauteur, format panoramique 16/9 (comme le hero) */
    .concept-gallery-frame--wide { aspect-ratio: 16 / 9; }
    .concept-gallery-item[style*="--fig-img"]:hover .concept-gallery-frame { filter: brightness(1.07); }
    .concept-gallery-frame::before {
      content: '';
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(45deg, transparent, transparent 40px, rgba(255,255,255,0.02) 40px, rgba(255,255,255,0.02) 41px);
    }
    .concept-gallery-frame span {
      font-family: var(--font-display);
      font-size: 12px;
      letter-spacing: 0.3em;
      color: var(--grey-mid);
      text-transform: uppercase;
      position: relative;
      z-index: 1;
    }
    .concept-gallery-item[style*="--fig-img"] .concept-gallery-frame {
      background-image: var(--fig-img);
      background-size: cover;
      background-position: center;
    }
    .concept-gallery-item[style*="--fig-img"] .concept-gallery-frame::before,
    .concept-gallery-item[style*="--fig-img"] .concept-gallery-frame span { display: none; }

    /* ====== LIGHTBOX RENDUS : ouverture d'un rendu en grand, fenêtre 16/9 à contour blanc ====== */
    .render-lb {
      position: fixed;
      inset: 0;
      z-index: 2000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: clamp(16px, 4vw, 40px);
      background: rgba(10, 10, 10, 0.92);
      -webkit-backdrop-filter: blur(3px);
      backdrop-filter: blur(3px);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .28s ease, visibility .28s ease;
    }
    .render-lb.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
    .render-lb-stage {
      /* jamais plus large que l'espace disponible : marges garanties sur tout support */
      width: min(100%, calc(82vh * 16 / 9), 1120px);
      aspect-ratio: 16 / 9;          /* fenêtre 16/9, comme l'image de tête de page */
      background: var(--black);
      border: 6px solid var(--white); /* petit contour blanc */
      box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
      position: relative;
      transform: scale(.985);
      transition: transform .28s ease;
    }
    .render-lb.is-open .render-lb-stage { transform: scale(1); }
    .render-lb-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;           /* rendu visible en entier, centré dans la fenêtre */
      display: block;
    }
    .render-lb-close {
      position: absolute;
      top: clamp(14px, 3vw, 24px);
      right: clamp(14px, 3vw, 28px);
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: none;
      color: var(--white);
      font-size: 30px;
      line-height: 1;
      cursor: pointer;
      opacity: 0.75;
      transition: opacity .2s ease;
    }
    .render-lb-close:hover,
    .render-lb-close:focus-visible { opacity: 1; }
    @media (prefers-reduced-motion: reduce) {
      .render-lb,
      .render-lb-stage { transition: none; }
      .render-lb-stage { transform: none; }
    }

    /* Bloc "À venir" (close-ups détails, modélisation 3D), mis en avant comme un titre */
    .concept-soon {
      margin-top: 64px;
      padding-top: 30px;
      border-top: 1px solid var(--grey-light);
    }
    .concept-soon-title {
      display: block;
      font-family: var(--font-display);
      font-size: clamp(42px, 7vw, 76px);
      letter-spacing: 0.05em;
      color: var(--black);
      line-height: 1;
    }
    .concept-soon-text {
      display: block;
      margin-top: 16px;
      font-size: 13px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--grey-mid);
    }

    @media (max-width: 768px) {
      .concept-split { grid-template-columns: 1fr; gap: 32px; margin-top: 48px; }
      .concept-gallery-item { flex: 0 0 auto; }
      .concept-gallery-frame { height: clamp(190px, 32vh, 300px); }
    }

    /* DELIVERABLES BOX */
    .deliverables-box {
      background: var(--black);
      padding: 60px 52px;
      margin-top: 48px;
    }
    .deliverables-box-head {
      display: flex;
      align-items: baseline;
      gap: 16px;
      margin-bottom: 32px;
    }
    .deliverables-box-title {
      font-family: var(--font-display);
      font-size: 26px;
      letter-spacing: 0.06em;
      color: var(--white);
    }
    .deliverables-box-format {
      font-size: 10px;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--grey-mid);
      border: 1px solid var(--grey-dark);
      padding: 5px 10px;
    }
    .deliverables-box-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1px;
    }
    .deliverables-box-list li {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      padding: 24px 0;
      border-top: 1px solid var(--grey-dark);
    }
    .deliverables-box-list li .del-num {
      font-family: var(--font-display);
      font-size: 15px;
      color: var(--grey-mid);
      letter-spacing: 0.1em;
      min-width: 24px;
      padding-top: 2px;
    }
    .deliverables-box-list li .del-text {
      font-size: 13px;
      line-height: 1.6;
      color: var(--white);
      font-weight: 300;
    }
    .deliverables-intro {
      font-size: 15px;
      line-height: 1.7;
      color: var(--grey-mid);
      font-weight: 300;
      max-width: 620px;
      margin-bottom: 36px;
    }
    .deliverables-intro strong {
      color: var(--white);
      font-weight: 500;
    }
    .deliverables-box-list li .del-body { display: flex; flex-direction: column; gap: 5px; }
    .deliverables-box-list li .del-benefit {
      font-size: 13px;
      line-height: 1.6;
      color: #a8a8a4;
      font-weight: 300;
    }

    /* Variante claire de l'encart (contexte / référence) : casse l'effet "double bloc noir" */
    .deliverables-box.is-context {
      background: transparent;
      border: 1px solid var(--grey-light);
    }
    .deliverables-box.is-context .deliverables-box-title { color: var(--black); }
    .deliverables-box.is-context .deliverables-box-format { border-color: var(--grey-light); }
    .deliverables-box.is-context .deliverables-intro { color: var(--grey-dark); }
    .deliverables-box.is-context .deliverables-intro strong { color: var(--black); }
    .deliverables-box.is-context .deliverables-box-list li { border-top-color: var(--grey-light); }
    .deliverables-box.is-context .deliverables-box-list li .del-text { color: var(--grey-dark); }

    /* POSTURE STATEMENT : bloc aéré pour les déclarations de posture */
    .posture-statement {
      position: relative;
      padding: 8px 0 8px 32px;
      margin: 24px 0 100px;
      max-width: 720px;
    }
    .posture-statement::before {
      content: '';
      position: absolute;
      left: 0;
      top: 8px;
      bottom: 8px;
      width: 1px;
      background: var(--grey-mid);
      opacity: 0.4;
    }
    .posture-statement p {
      font-family: var(--font-body);
      font-size: 18px;
      line-height: 1.65;
      color: var(--black);
      font-weight: 300;
      margin: 0;
      letter-spacing: 0.005em;
    }
    .posture-statement p + p {
      margin-top: 18px;
    }
    .posture-statement strong {
      font-weight: 500;
      color: var(--black);
    }
    @media (max-width: 768px) {
      .posture-statement {
        padding-left: 20px;
        margin-bottom: 56px;
      }
      .posture-statement p {
        font-size: 16px;
      }
    }

    /* INVESTMENT BLOCK */
    .investment-block {
      margin-top: 96px;
      padding-top: 56px;
      border-top: 1px solid var(--grey-light);
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 8px 24px;
    }
    .investment-label {
      font-size: 11px;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--grey-mid);
      width: 100%;
      margin-bottom: 4px;
    }
    .investment-range {
      font-family: var(--font-display);
      font-size: 24px;
      line-height: 1;
      color: var(--black);
      letter-spacing: 0.04em;
    }
    .investment-note {
      font-size: 14px;
      line-height: 1.6;
      color: var(--grey-dark);
      font-weight: 300;
      max-width: 380px;
    }

    @media (max-width: 640px) {
      .investment-range { font-size: 22px; }
    }

    /* CTA ROW + NEXT OFFER */
    .cta-row {
      margin-top: 80px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 16px 32px;
    }
    .cta-primary {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: var(--black);
      color: var(--white);
      text-decoration: none;
      font-size: 11px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      padding: 16px 28px;
      transition: gap 0.3s ease, background 0.3s ease;
    }
    .cta-primary::after { content: '→'; transition: transform 0.3s ease; }
    .cta-primary:hover { background: var(--grey-dark); gap: 18px; }
    .cta-primary:hover::after { transform: translateX(4px); }
    .cta-secondary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--grey-dark);
      text-decoration: none;
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      border-bottom: 1px solid var(--grey-mid);
      padding-bottom: 3px;
      transition: color 0.3s ease, border-color 0.3s ease;
    }
    .cta-secondary:hover { color: var(--black); border-color: var(--black); }

    .next-offer {
      margin-top: 120px;
      border-top: 1px solid var(--grey-light);
      padding-top: 56px;
      display: block;
      text-decoration: none;
    }
    .next-offer-label {
      font-size: 11px;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--grey-mid);
      margin-bottom: 14px;
    }
    .next-offer-row {
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 12px 20px;
    }
    .next-offer-num {
      font-family: var(--font-display);
      font-size: 28px;
      color: var(--grey-light);
      letter-spacing: 0.05em;
    }
    .next-offer-title {
      font-family: var(--font-display);
      font-size: 30px;
      color: var(--black);
      letter-spacing: 0.04em;
      transition: opacity 0.3s ease;
    }
    .next-offer-arrow {
      font-size: 18px;
      color: var(--grey-dark);
      transition: transform 0.3s ease;
      margin-left: auto;
    }
    .next-offer:hover .next-offer-title { opacity: 0.55; }
    .next-offer:hover .next-offer-arrow { transform: translateX(6px); }
    .next-offer-desc {
      font-size: 14px;
      line-height: 1.6;
      color: var(--grey-dark);
      font-weight: 300;
      max-width: 520px;
      margin-top: 12px;
    }

    @media (max-width: 900px) {
      .process-timeline { grid-template-columns: repeat(2, 1fr); gap: 0; }
      .timeline-week { padding: 0 24px; border-right: 1px solid var(--grey-light); }
      .timeline-week:nth-child(2n) { border-right: none; }
      .timeline-week:nth-child(1), .timeline-week:nth-child(2) { border-bottom: 1px solid var(--grey-light); padding-bottom: 32px; }
      .timeline-week:nth-child(3), .timeline-week:nth-child(4) { padding-top: 8px; }
      .timeline-week:first-child { padding-left: 0; }
      .timeline-week:nth-child(3) { padding-left: 0; }
    }
    @media (max-width: 560px) {
      .process-timeline { grid-template-columns: 1fr; }
      .timeline-week, .timeline-week:not(:first-child), .timeline-week:not(:last-child) {
        padding: 0 0 28px 0;
        border-right: none;
        border-bottom: 1px solid var(--grey-light);
      }
      .timeline-week:last-child { border-bottom: none; padding-bottom: 0; }
      .timeline-week-num { font-size: 32px; }
    }

    /* PORTFOLIO PASSION CARD */
    .portfolio-passion-wrap {
      border-top: 1px solid var(--grey-light);
      padding: 28px 40px 80px;
      max-width: 1200px;
      margin: 0 auto;
    }
    .portfolio-passion-eyebrow {
      display: block;
      font-size: 9px;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--grey-mid);
      margin-bottom: 20px;
    }
    .portfolio-passion-card {
      display: block;
      position: relative;
      overflow: hidden;
      background: var(--black);
      height: 26vh;
      min-height: 200px;
      text-decoration: none;
    }
    .passion-img-placeholder {
      width: 100%;
      height: 100%;
      background: var(--grey-dark);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      transition: transform 0.8s cubic-bezier(0.23,1,0.32,1), filter 0.5s ease;
    }
    .passion-img-placeholder::before {
      content: '';
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(45deg, transparent, transparent 40px, rgba(255,255,255,0.02) 40px, rgba(255,255,255,0.02) 41px);
    }
    .passion-img-placeholder span {
      font-family: var(--font-display);
      font-size: 11px;
      letter-spacing: 0.3em;
      color: var(--grey-dark);
      text-transform: uppercase;
      position: relative;
      z-index: 1;
    }
    .portfolio-passion-card[style*="--passion-img"] .passion-img-placeholder {
      background-image: var(--passion-img);
      background-size: cover;
      background-position: right center;
    }
    .portfolio-passion-card[style*="--passion-img"] .passion-img-placeholder::before,
    .portfolio-passion-card[style*="--passion-img"] .passion-img-placeholder span { display: none; }
    .portfolio-passion-card[style*="--passion-img"]:hover .passion-img-placeholder {
      transform: scale(1.05);
    }
    .passion-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to right, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.75) 35%, rgba(10,10,10,0.3) 65%, rgba(10,10,10,0.05) 100%);
      display: flex;
      align-items: center;
      padding: 40px 56px;
      transition: background 0.4s ease;
    }
    .portfolio-passion-card:hover .passion-overlay {
      background: linear-gradient(to right, rgba(10,10,10,0.96) 0%, rgba(10,10,10,0.82) 35%, rgba(10,10,10,0.4) 65%, rgba(10,10,10,0.1) 100%);
    }
    .passion-content { max-width: 52%; }
    .passion-title {
      font-family: var(--font-display);
      font-size: clamp(22px, 2.8vw, 36px);
      letter-spacing: 0.1em;
      color: var(--white);
      line-height: 1.1;
      margin-bottom: 12px;
    }
    .passion-desc {
      font-family: var(--font-serif);
      font-size: 14px;
      font-style: italic;
      font-weight: 300;
      line-height: 1.7;
      color: var(--accent);
      margin-bottom: 20px;
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition: max-height 0.5s cubic-bezier(0.23,1,0.32,1), opacity 0.4s;
    }
    .portfolio-passion-card:hover .passion-desc { max-height: 80px; opacity: 1; }
    .passion-cta {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 10px;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--white);
      font-weight: 400;
      transition: gap 0.3s ease;
    }
    .passion-cta .cta-arrows {
      display: inline-flex;
      align-items: center;
      transition: transform 0.3s ease;
    }
    .passion-cta .cta-arrows svg { width: 9px; height: 12px; fill: currentColor; }
    .portfolio-passion-card:hover .passion-cta { gap: 16px; }
    .portfolio-passion-card:hover .passion-cta .cta-arrows { transform: translateX(4px); }

    @media (max-width: 900px) {
      .portfolio-passion-card { height: auto; aspect-ratio: 4/3; }
      .passion-overlay {
        background: linear-gradient(to top, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.4) 60%, transparent 100%);
        align-items: flex-end;
        padding: 32px 24px;
      }
      .portfolio-passion-card:hover .passion-overlay {
        background: linear-gradient(to top, rgba(10,10,10,0.98) 0%, rgba(10,10,10,0.5) 60%, transparent 100%);
      }
      .passion-content { max-width: 100%; }
    }

    /* PORTFOLIO PAGE */
    .portfolio-grid {
      padding: 80px 40px 72px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      column-gap: 80px;
      row-gap: 80px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .portfolio-item {
      position: relative;
      overflow: hidden;
      aspect-ratio: 2/2.4;
      background: var(--grey-dark);
    }

    /* Cartes projet cliquables */
    .portfolio-item { cursor: pointer; }

    .portfolio-img-placeholder {
      width: 100%; height: 100%;
      background: linear-gradient(135deg, var(--grey-dark) 0%, #2a2a28 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.8s cubic-bezier(0.23,1,0.32,1), filter 0.5s ease;
    }

    /* ====== IMAGES DU PORTFOLIO ======
       Même fonctionnement que --offer-img : renseigner la variable --portfolio-img
       dans l'attribut style de la carte "portfolio-item" pour afficher une image.
       Tant que --portfolio-img n'est pas renseignée, le dégradé par défaut reste affiché.
       Les images du portfolio s'affichent EN COULEUR (pas de filtre N&B), avec zoom au survol. */
    .portfolio-item[style*="--portfolio-img"] .portfolio-img-placeholder {
      background: var(--portfolio-img);
      background-size: cover;
      background-position: center;
    }
    .portfolio-item[style*="--portfolio-img"]:hover .portfolio-img-placeholder {
      transform: scale(1.05);
    }

    .portfolio-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.25) 50%, transparent 100%);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 40px 32px;
      transition: background 0.4s ease;
    }
    .portfolio-item:hover .portfolio-overlay {
      background: linear-gradient(to top, rgba(10,10,10,0.98) 0%, rgba(10,10,10,0.5) 60%, rgba(10,10,10,0.1) 100%);
    }

    .portfolio-number {
      font-family: var(--font-display);
      font-size: 64px;
      color: rgba(255,255,255,0.42);
      line-height: 1;
      margin-bottom: -16px;
    }

    .portfolio-title {
      font-family: var(--font-display);
      font-size: clamp(22px, 2.5vw, 32px);
      letter-spacing: 0.1em;
      color: var(--white);
      line-height: 1.1;
      margin-bottom: 14px;
    }

    .portfolio-desc {
      font-family: var(--font-body);
      font-size: 15px;
      font-weight: 300;
      line-height: 1.7;
      color: var(--accent);
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.5s cubic-bezier(0.23,1,0.32,1), opacity 0.4s;
      opacity: 0;
    }
    .portfolio-item:hover .portfolio-desc { max-height: 120px; opacity: 1; }

    /* Flèche de rappel sur les cartes cliquables (portfolio + moto), écho du CTA des offres */
    .card-arrow {
      display: inline-flex;
      align-items: center;
      margin-top: 16px;
      color: var(--white);
      transition: transform 0.3s ease;
    }
    .card-arrow svg { width: 9px; height: 12px; fill: currentColor; }
    .moto-item:hover .card-arrow { transform: translateX(4px); }

    /* Flèche intégrée à la fin de la phrase de description (cartes portfolio) :
       elle fait partie du texte, donc elle apparaît en même temps que lui au survol. */
    .portfolio-desc .desc-arrow {
      display: inline-flex;
      align-items: center;
      margin-left: 9px;
      vertical-align: middle;
    }
    .portfolio-desc .desc-arrow svg { width: 8px; height: 11px; fill: currentColor; display: block; }

    /* ====== GRILLE PERSONNALISATION MOTO ======
       Cartes au format paysage, empilées sur une seule colonne,
       à la même largeur qu'une carte du portfolio (~560px).
       Pour ajuster la hauteur des cartes, modifier l'aspect-ratio
       de .moto-item (ex. 16/9 pour des cartes plus hautes). */
    .moto-grid {
      padding: 64px 40px 110px;
      display: flex;
      flex-direction: column;
      gap: 36px;
      max-width: 560px;
      margin: 0 auto;
    }

    .moto-item {
      position: relative;
      overflow: hidden;
      aspect-ratio: 21/9;
      background: var(--grey-dark);
    }
    .moto-item:not(.is-placeholder) { cursor: pointer; }

    .moto-item.is-placeholder {
      background: var(--grey-light);
      opacity: 0.6;
    }
    .moto-item.is-placeholder .moto-img-placeholder { background: var(--grey-light); }

    .moto-img-placeholder {
      width: 100%; height: 100%;
      background: linear-gradient(135deg, var(--grey-dark) 0%, #2a2a28 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      transition: transform 0.8s cubic-bezier(0.23,1,0.32,1), filter 0.5s ease;
    }
    .moto-img-placeholder span {
      font-family: var(--font-display);
      font-size: 11px;
      letter-spacing: 0.3em;
      color: var(--grey-mid);
      text-transform: uppercase;
      position: relative;
      z-index: 1;
    }

    /* ====== IMAGES MOTO ======
       Renseigner la variable --moto-img dans l'attribut style de la carte
       .moto-item pour afficher une image (ex. style="--moto-img: url('images/moto-ducati.jpg');").
       Tant qu'elle n'est pas renseignée, le dégradé + label restent affichés.
       Images en couleur, avec léger zoom au survol. */
    .moto-item[style*="--moto-img"] .moto-img-placeholder {
      background: var(--moto-img);
      background-size: cover;
      background-position: center;
    }
    .moto-item[style*="--moto-img"] .moto-img-placeholder span { display: none; }
    .moto-item[style*="--moto-img"]:hover .moto-img-placeholder { transform: scale(1.05); }

    .moto-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.25) 55%, transparent 100%);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 28px 32px;
      transition: background 0.4s ease;
    }
    .moto-item:hover .moto-overlay {
      background: linear-gradient(to top, rgba(10,10,10,0.98) 0%, rgba(10,10,10,0.5) 60%, rgba(10,10,10,0.1) 100%);
    }

    .moto-number {
      font-family: var(--font-display);
      font-size: 52px;
      color: rgba(255,255,255,0.42);
      line-height: 1;
      margin-bottom: -12px;
    }

    .moto-title {
      font-family: var(--font-display);
      font-size: clamp(20px, 2.2vw, 28px);
      letter-spacing: 0.1em;
      color: var(--white);
      line-height: 1.1;
    }

    /* La carte placeholder ne réagit pas au survol */
    .moto-item.is-placeholder .moto-overlay { background: transparent; }
    .moto-item.is-placeholder:hover .moto-overlay { background: transparent; }
    .moto-item.is-placeholder .moto-number,
    .moto-item.is-placeholder .moto-title { color: var(--grey-dark); }

    /* ====== COMPARATEUR AVANT / APRÈS (curseur glissant) ======
       Présenté comme une figure du site (même format que le "rendu final"
       de l'offre 1 : cadre 16/8 dans la colonne de contenu, légende dessous).
       Deux images superposées : version d'origine (gauche) et personnalisée (droite).
       Pour les images : renseigner --img-before et --img-after sur .compare, ex :
       style="--img-before: url('images/ducati-origine.jpg'); --img-after: url('images/ducati-perso.jpg');" */
    .compare-figure { margin: 0 0 8px; }
    .compare {
      --pos: 50%;
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 8;
      overflow: hidden;
      background: var(--grey-dark);
      user-select: none;
      touch-action: none;
      cursor: ew-resize;
    }
    .compare-layer {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
    /* dégradés de remplacement tant qu'aucune image n'est renseignée */
    .compare-after  { background-image: linear-gradient(135deg, #2a2a28 0%, #161614 100%); }
    .compare-before { background-image: linear-gradient(135deg, #45453f 0%, #2a2a26 100%); z-index: 2; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
    .compare[style*="--img-after"]  .compare-after  { background-image: var(--img-after); }
    .compare[style*="--img-before"] .compare-before { background-image: var(--img-before); }

    .compare-tag {
      position: absolute;
      top: 20px;
      z-index: 4;
      font-family: var(--font-display);
      font-size: 11px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--white);
      background: rgba(10,10,10,0.55);
      padding: 6px 13px;
      pointer-events: none;
      backdrop-filter: blur(2px);
    }
    .compare-tag-before { left: 20px; }
    .compare-tag-after  { right: 20px; }

    .compare-handle {
      position: absolute;
      top: 0; bottom: 0;
      left: var(--pos);
      transform: translateX(-50%);
      z-index: 3;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }
    .compare-line {
      position: absolute;
      top: 0; bottom: 0;
      left: 50%;
      width: 2px;
      transform: translateX(-50%);
      background: var(--white);
      box-shadow: 0 0 8px rgba(0,0,0,0.35);
    }
    .compare-grip {
      position: relative;
      width: 48px; height: 48px;
      border-radius: 50%;
      background: var(--white);
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      color: var(--black);
      cursor: ew-resize;
      pointer-events: auto;
      box-shadow: 0 2px 16px rgba(0,0,0,0.35);
      transition: transform 0.2s ease;
    }
    .compare-grip:hover { transform: scale(1.06); }
    .compare.is-dragging .compare-grip { transform: scale(1.1); }
    .compare-grip svg { width: 8px; height: 11px; fill: currentColor; display: block; }
    .compare-grip .arr-l { transform: rotate(180deg); }

    /* Bloc "idée" : texte noir sur fond blanc, bloc large (pas de rectangle noir) */
    .moto-idea { margin-top: 72px; }
    .moto-idea-text {
      font-size: 18px;
      line-height: 1.75;
      color: var(--black);
      font-weight: 300;
      max-width: 900px;
      margin-top: 4px;
    }
    @media (max-width: 768px) {
      .moto-idea { margin-top: 56px; }
      .moto-idea-text { font-size: 16px; }
    }

    /* ====== FORMULAIRE PROJET MOTO (simplifié, "hors cadre") ======
       Formulaire court, distinct du grand formulaire contact. Un champ caché
       "projet" identifie automatiquement la moto concernée dans l'e-mail reçu. */
    .moto-form-card {
      margin-top: 72px;
      border: 1px solid var(--grey-light);
      padding: 48px 52px;
      background: var(--white);
    }
    .moto-form-eyebrow {
      display: block;
      font-size: 11px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--grey-mid);
      margin-bottom: 16px;
    }
    .moto-form-title {
      font-family: var(--font-serif);
      font-style: italic;
      font-weight: 300;
      font-size: 23px;
      line-height: 1.45;
      color: var(--black);
      max-width: 580px;
      margin-bottom: 18px;
    }
    .moto-form-projet {
      display: inline-flex;
      align-items: baseline;
      gap: 8px;
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--grey-mid);
      border: 1px solid var(--grey-light);
      padding: 8px 13px;
      margin-bottom: 40px;
    }
    .moto-form-projet strong {
      color: var(--black);
      font-weight: 500;
      letter-spacing: 0.08em;
    }
    .moto-form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 28px;
    }
    @media (max-width: 600px) {
      .moto-form-card { padding: 32px 22px; }
      .moto-form-row { grid-template-columns: 1fr; gap: 0; }
    }

    /* ABOUT PAGE */
    .about-content {
      padding: 80px 40px;
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: start;
    }

    .about-text h3 {
      font-family: var(--font-display);
      font-size: 28px;
      letter-spacing: 0.1em;
      color: var(--black);
      margin-bottom: 16px;
      margin-top: 48px;
    }
    .about-text h3:first-child { margin-top: 0; }

    .about-text p {
      font-family: var(--font-body);
      font-size: 15px;
      font-weight: 300;
      line-height: 1.8;
      color: var(--grey-dark);
      margin-bottom: 16px;
    }
    .about-text strong {
      font-weight: 500;
      color: var(--black);
    }

    .skills-list {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }
    .skills-list li {
      font-size: 10px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      border: 1px solid var(--grey-light);
      padding: 6px 14px;
      color: var(--grey-dark);
    }

    .about-photo {
      position: relative;
      aspect-ratio: 3/4;
      background: var(--grey-light);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .about-photo span {
      font-size: 9px;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--grey-mid);
    }
    /* Renseigner --about-img: url('images/portrait-atelier.jpg'); dans l'attribut style
       de la div .about-photo pour afficher la photo (sinon le placeholder gris reste affiché). */
    .about-photo[style*="--about-img"] {
      background-image: var(--about-img);
      background-size: cover;
      background-position: center;
    }
    .about-photo[style*="--about-img"] span { display: none; }

    /* CONTACT PAGE */
    .contact-content {
      padding: 80px 40px;
      max-width: 800px;
      margin: 0 auto;
    }

    .contact-intro {
      font-family: var(--font-serif);
      font-size: 18px;
      font-style: italic;
      font-weight: 300;
      line-height: 1.8;
      color: var(--grey-dark);
      margin-bottom: 60px;
    }

    /* LEGAL / PRIVACY PAGE */
    .legal-content {
      padding: 72px 40px 96px;
      max-width: 820px;
      margin: 0 auto;
    }
    .legal-updated {
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--grey-mid);
      margin-bottom: 56px;
    }
    .legal-section { margin-bottom: 56px; }
    .legal-section:last-child { margin-bottom: 0; }
    .legal-section h2 {
      font-family: var(--font-display);
      font-size: 30px;
      letter-spacing: 0.08em;
      color: var(--black);
      margin-bottom: 28px;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--grey-light);
    }
    .legal-block { margin-bottom: 28px; }
    .legal-block:last-child { margin-bottom: 0; }
    .legal-block h3 {
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--black);
      margin-bottom: 12px;
    }
    .legal-block p {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 300;
      line-height: 1.85;
      color: var(--grey-dark);
      margin-bottom: 12px;
    }
    .legal-block p:last-child { margin-bottom: 0; }
    .legal-block strong { font-weight: 500; color: var(--black); }
    .legal-block a {
      color: var(--black);
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .legal-block ul {
      list-style: none;
      margin: 4px 0 12px;
      padding: 0;
    }
    .legal-block ul li {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 300;
      line-height: 1.7;
      color: var(--grey-dark);
      padding-left: 18px;
      position: relative;
      margin-bottom: 6px;
    }
    .legal-block ul li::before {
      content: '—';
      position: absolute;
      left: 0;
      color: var(--grey-mid);
    }
    .form-group {
      margin-bottom: 32px;
    }

    .form-label {
      display: block;
      font-size: 11px;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--grey-mid);
      margin-bottom: 10px;
    }

    .form-input, .form-textarea {
      width: 100%;
      background: none;
      border: none;
      border-bottom: 1px solid var(--grey-light);
      padding: 12px 0;
      font-family: var(--font-body);
      font-size: 15px;
      font-weight: 300;
      color: var(--black);
      outline: none;
      transition: border-color 0.3s;
      appearance: none;
    }
    .form-input:focus, .form-textarea:focus {
      border-color: var(--black);
    }

    /* CUSTOM SELECT */
    .custom-select {
      position: relative;
      width: 100%;
    }
    .custom-select-trigger {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--grey-light);
      padding: 12px 0;
      font-family: var(--font-body);
      font-size: 15px;
      font-weight: 300;
      color: var(--black);
      user-select: none;
      transition: border-color 0.3s;
    }
    .custom-select-trigger.on-dark {
      border-bottom-color: var(--grey-dark);
      color: var(--white);
    }
    .custom-select-trigger:hover { border-color: currentColor; }
    .custom-select-arrow {
      width: 10px; height: 6px;
      position: relative;
      flex-shrink: 0;
      transition: transform 0.3s ease;
    }
    .custom-select-arrow::before, .custom-select-arrow::after {
      content: '';
      position: absolute;
      bottom: 0;
      width: 7px; height: 2px;
      background: var(--grey-mid);
      border-radius: 1px;
    }
    .custom-select-arrow::before { left: 0; transform: rotate(35deg); transform-origin: left bottom; }
    .custom-select-arrow::after { right: 0; transform: rotate(-35deg); transform-origin: right bottom; }
    .custom-select.open .custom-select-arrow { transform: rotate(180deg); }
    .custom-select-dropdown {
      position: absolute;
      top: calc(100% + 2px);
      left: 0; right: 0;
      background: var(--black);
      border: 1px solid var(--grey-dark);
      z-index: 100;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s cubic-bezier(0.23,1,0.32,1);
    }
    .custom-select.open .custom-select-dropdown { max-height: 440px; }
    .custom-select-option {
      padding: 14px 16px;
      font-family: var(--font-body);
      font-size: 13px;
      color: var(--accent);
      transition: background 0.2s, color 0.2s;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .custom-select-option:hover { background: var(--grey-dark); color: var(--white); }
    .custom-select-option.selected { color: var(--white); }
    .custom-select-option .opt-num {
      font-weight: 500;
      font-size: 12px;
      color: var(--grey-mid);
      min-width: 62px;
      transition: color 0.2s;
    }
    .custom-select-option:hover .opt-num,
    .custom-select-option.selected .opt-num { color: var(--white); }
    .custom-select-trigger .trigger-num {
      font-weight: 500;
      margin-right: 6px;
    }

    /* ===== Option combinée (parcours complet) mise en avant ===== */
    .custom-select-option.offer-combo {
      position: relative;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      padding-top: 16px;
      padding-bottom: 16px;
      background: rgba(255,255,255,0.05);
      border-top: 1px solid rgba(255,255,255,0.08);
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .custom-select-option.offer-combo .opt-num { min-width: 0; }
    .opt-badge {
      position: absolute;
      top: 10px;
      right: 12px;
      font-family: var(--font-display);
      font-size: 9px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--black);
      background: var(--white);
      padding: 3px 8px;
      line-height: 1;
      white-space: nowrap;
    }
    .opt-note {
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 300;
      line-height: 1.5;
      color: var(--grey-mid);
      transition: color 0.2s;
    }
    .offer-combo:hover .opt-note,
    .offer-combo.selected .opt-note { color: var(--accent); }

    .form-textarea { resize: none; min-height: 100px; }

    .form-submit {
      display: inline-flex;
      align-items: center;
      gap: 16px;
      background: var(--black);
      color: var(--white);
      border: none;
      padding: 16px 40px;
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 400;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      transition: gap 0.3s ease, background 0.2s;
      margin-top: 16px;
    }
    .form-submit:hover { gap: 24px; background: var(--grey-dark); }
    .form-submit::after { content: '→'; font-size: 16px; }

    /* CREDENTIALS LINE */
    .credentials-line {
      padding: 32px 40px;
      text-align: center;
      border-top: 1px solid var(--grey-light);
    }
    .credentials-line-text {
      font-family: var(--font-body);
      font-size: clamp(13px, 1.2vw, 15px);
      font-style: normal;
      font-weight: 300;
      color: var(--grey-mid);
      letter-spacing: 0.06em;
    }

    /* REVEAL ANIMATIONS */
    .reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.8s cubic-bezier(0.23,1,0.32,1), transform 0.8s cubic-bezier(0.23,1,0.32,1);
    }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    .reveal-delay-1 { transition-delay: 0.1s; }
    .reveal-delay-2 { transition-delay: 0.2s; }
    .reveal-delay-3 { transition-delay: 0.3s; }

    /* MENU BURGER (mobile uniquement) */
    .nav-burger {
      display: none;
      width: 32px;
      height: 32px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 6px;
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 0;
      z-index: 1002;
    }
    .nav-burger span {
      display: block;
      width: 22px;
      height: 1.5px;
      background: var(--white);
      transition: transform 0.35s ease, opacity 0.25s ease;
      transform-origin: center;
    }
    .nav-burger.is-open span:nth-child(1) {
      transform: translateY(7.5px) rotate(45deg);
    }
    .nav-burger.is-open span:nth-child(2) {
      opacity: 0;
    }
    .nav-burger.is-open span:nth-child(3) {
      transform: translateY(-7.5px) rotate(-45deg);
    }

    /* RESPONSIVE */

    /* ===== TABLET (601–900px) ===== */
    @media (max-width: 900px) and (min-width: 601px) {
      .hero { padding: 64px 32px 220px; }
      .page-hero { padding: 48px 32px 36px; }
      .page-content { padding: 72px 32px; }
      .portfolio-grid { padding: 56px 32px 56px; column-gap: 32px; row-gap: 32px; }
      .moto-grid { padding: 48px 32px 72px; gap: 28px; }
      .portfolio-passion-wrap { padding: 24px 32px 64px; }
      .about-content { padding: 64px 32px; }
      .contact-content { padding: 64px 32px; }
      .deliverables-box { padding: 48px 36px; }
      .deliverable-item { padding: 36px 24px; }
      .offers-section { padding: 48px 32px 80px; }
      .credentials-line { padding: 32px; }
      .about-strip-wrapper > div { padding: 72px 32px !important; }
      footer { padding: 36px 32px; }
    }

    @media (max-width: 900px) {
      nav { padding: 0 24px; }
      .nav-right { gap: 20px; }
      .offers-grid {
        grid-template-columns: 1fr;
        gap: 56px;
      }
      .offer-pair {
        grid-template-columns: 1fr;
        gap: 0;
      }
      /* Sur mobile, les cartes sont empilées : l'ancien séparateur en
         position absolue à top:50% tombait sur l'image de la carte 02
         (les deux cartes n'ayant pas la même hauteur). On le masque et
         on trace la ligne via une bordure sur la première carte : elle
         se cale toujours exactement à la jointure entre 01 et 02, quelle
         que soit la hauteur de chaque carte. */
      .offer-pair-sep { display: none; }
      .offer-pair .offer-card:first-child {
        border-bottom: 4px solid var(--white);
      }
      /* On retire les anciens clip-path/marges de la version desktop */
      .offer-pair .offer-card:first-child,
      .offer-pair .offer-card:last-child {
        clip-path: none;
        margin-left: 0;
        margin-top: 0;
      }
      /* Sur mobile, retour à un format carré classique pour 01/02 */
      .offer-pair .offer-card {
        aspect-ratio: 4/3;
        height: auto;
        min-height: 0;
      }
      /* Sur mobile, la bande 03 reprend un format plus carré pour rester lisible */
      .offer-card.offer-standalone {
        aspect-ratio: 4/3;
        height: auto;
        min-height: 0;
      }
      .offer-standalone .offer-overlay {
        background: linear-gradient(to top, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.4) 60%, transparent 100%);
        justify-content: flex-end;
        padding: 32px 24px;
      }
      .offer-card.offer-standalone:hover .offer-overlay {
        background: linear-gradient(to top, rgba(10,10,10,0.98) 0%, rgba(10,10,10,0.5) 60%, transparent 100%);
      }
      /* Sur mobile, le texte de la bande reprend toute la largeur */
      .offer-standalone .offer-number,
      .offer-standalone .offer-title,
      .offer-standalone .offer-cta,
      .offer-standalone .offer-desc {
        max-width: 100%;
      }
      .about-content { grid-template-columns: 1fr; }
      .portfolio-grid { grid-template-columns: repeat(2, 1fr); padding: 40px 20px 40px; column-gap: 20px; row-gap: 20px; }
    }

    @media (max-width: 768px) {
      .nav-burger { display: flex; }

      /* On transforme .nav-right en panneau plein écran caché par défaut */
      .nav-right {
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--black);
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 0;
        padding: 40px 32px;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.23,1,0.32,1);
        overflow-y: auto;
      }
      .nav-right.is-open {
        transform: translateX(0);
      }
      .nav-right .nav-link {
        font-size: 18px;
        letter-spacing: 0.2em;
        padding: 18px 0;
        width: 100%;
        border-bottom: 1px solid var(--grey-dark);
      }
      .nav-right .nav-link::after { display: none; }
      .nav-right .lang-switcher {
        margin-top: 28px;
      }
    }
    /* ===== RESPONSIVE MOBILE GLOBAL ===== */
    @media (max-width: 600px) {

      /* NAV */
      nav { padding: 0 20px; }

      /* HERO */
      .hero { padding: 64px 20px 180px; }
      .hero-logo-wrap { width: 88vw; }
      .hero-tagline { font-size: 13px; padding: 0 20px; }
      .hero-tagline-wrap { bottom: 60px; }

      /* SECTION OFFRES */
      .offers-section { padding: 40px 20px 80px; }

      /* CREDENTIALS LINE */
      .credentials-line { padding: 28px 20px; }

      /* CONTACT STRIP */
      .about-strip-wrapper > div { padding: 60px 20px !important; }

      /* FOOTER */
      footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 32px 20px;
      }

      /* PAGES : hero header */
      .page-hero { padding: 40px 20px 32px; }
      .page-hero::after { font-size: 100px; right: 16px; }
      .page-title { font-size: clamp(32px, 10vw, 56px); }
      .page-subtitle { font-size: 16px; max-width: 100%; }

      /* PAGES : contenu */
      .page-content { padding: 56px 20px; }

      /* DELIVERABLES BOX */
      .deliverables-grid { margin-top: 48px; }
      .deliverables-box { padding: 32px 20px; }
      .deliverable-item { padding: 32px 20px; }
      .deliverables-box-head { flex-wrap: wrap; gap: 10px; }
      .deliverables-box-list {
        grid-template-columns: 1fr;
      }

      /* POSTURE STATEMENT */
      .posture-statement { margin-bottom: 40px; }

      /* FIGURES */
      .content-figure { max-width: 100%; overflow: hidden; }
      /* PORTFOLIO PASSION */
      .portfolio-passion-wrap { padding: 20px 20px 60px; }
      .passion-overlay { padding: 24px 20px; }

      /* PORTFOLIO GRID */
      .portfolio-grid {
        grid-template-columns: 1fr !important;
        padding: 32px 20px 60px !important;
        column-gap: 0 !important;
        row-gap: 16px !important;
      }

      /* MOTO GRID */
      .moto-grid { padding: 32px 20px 56px; gap: 20px; }

      /* COMPARATEUR AVANT / APRÈS */
      .compare-grip { width: 42px; height: 42px; }
      .compare-tag { top: 14px; font-size: 10px; padding: 5px 10px; }
      .compare-tag-before { left: 14px; }
      .compare-tag-after { right: 14px; }

      /* ABOUT PAGE */
      .about-content { padding: 48px 20px; gap: 40px; }

      /* CONTACT PAGE */
      .contact-content { padding: 48px 20px; }

      /* LEGAL PAGE */
      .legal-content { padding: 48px 20px 72px; }
      .legal-section h2 { font-size: 26px; }
      .cta-row { margin-top: 48px; flex-direction: column; align-items: flex-start; gap: 20px; }
      .cta-primary { width: 100%; justify-content: center; }

      /* NEXT OFFER */
      .next-offer { margin-top: 72px; padding-top: 40px; }
      .next-offer-title { font-size: clamp(22px, 6vw, 30px); }
      .next-offer-arrow { display: none; }

      /* INVESTMENT NOTE */
      .investment-block { margin-top: 56px; padding-top: 36px; }
      .investment-note { max-width: 100%; font-size: 13px; }

    }

    /* ============================================================
       APPAREILS TACTILES (téléphones / tablettes sans souris)
       Sur ces écrans il n'y a pas de survol fiable : on supprime
       l'animation de révélation et on affiche le texte en permanence.
       Les cartes concernées passent en mise en page empilée
       (image en bande au-dessus, texte en panneau en dessous) et
       s'adaptent à la hauteur de leur contenu, pour qu'aucun texte
       ne soit jamais tronqué.
       Déclencheur : (hover: none) OU largeur <= 600px (téléphones).
       Le repli sur la largeur garantit que tous les téléphones obtiennent
       la mise en page empilée, même ceux qui se déclarent (hover: hover)
       ou en test responsive sans émulation tactile. Les tablettes
       (601-900px) conservent l'animation. */
    @media (hover: none), (max-width: 600px) {

      /* 1. Descriptions toujours visibles, sans transition ni
            dépendance au survol (offres, portfolio, bandeau passion). */
      .offer-desc,
      .offer-standalone .offer-desc,
      .portfolio-desc,
      .passion-desc {
        max-height: none !important;
        opacity: 1 !important;
        overflow: visible;
        transition: none;
      }

      /* 2. Les cartes s'adaptent à la hauteur de leur contenu
            au lieu d'être verrouillées sur un ratio fixe. */
      .offer-card,
      .offer-pair .offer-card,
      .offer-card.offer-standalone,
      .portfolio-item,
      .portfolio-passion-card {
        aspect-ratio: auto;
        height: auto;
        min-height: 0;
      }

      /* 3. L'image devient une bande paysage en haut ; le calque de
            texte repasse dans le flux, juste en dessous (panneau noir). */
      .offer-img-placeholder,
      .portfolio-img-placeholder,
      .passion-img-placeholder {
        height: auto;
        aspect-ratio: 3 / 2;
      }
      .offer-overlay,
      .portfolio-overlay,
      .passion-overlay {
        position: relative;
        inset: auto;
        background: var(--black);
        transition: none;
      }
      /* Le bandeau passion : panneau pleine largeur sous l'image. */
      .passion-overlay { align-items: stretch; }
      .passion-content { max-width: 100%; }

      /* 4. On neutralise les effets liés au survol (zoom d'image,
            décalage des flèches) pour éviter tout état "collé" après
            un appui, notamment sur iOS Safari. */
      .offer-card[style*="--offer-img"]:hover .offer-img-placeholder,
      .portfolio-item[style*="--portfolio-img"]:hover .portfolio-img-placeholder,
      .portfolio-passion-card[style*="--passion-img"]:hover .passion-img-placeholder {
        transform: none;
      }
      .offer-card:hover .offer-cta,
      .portfolio-passion-card:hover .passion-cta {
        gap: 10px;
      }
      .offer-card:hover .offer-cta .cta-arrows,
      .portfolio-passion-card:hover .passion-cta .cta-arrows,
      .moto-item:hover .card-arrow {
        transform: none;
      }
    }

    /* Cartes projet devenues des liens : neutralise le style d'ancre par défaut */
    a.portfolio-item, a.moto-item { display: block; text-decoration: none; color: inherit; }


    /* ============================================================
       TABLETTES (iPad et écrans larges sans survol fiable)
       Sur ces écrans, (hover: none) déclenchait la mise en page
       "téléphone" (image en bande + panneau texte), ce qui faisait
       perdre aux bandes horizontales fines — l'offre 03 et la carte
       passion "personnalisation moto" — leur format pour les changer
       en pavés carrés plein écran, incohérents avec le reste du site.
       Ici on restaure POUR CES DEUX CARTES leur géométrie desktop
       (bande large et fine, texte sur la gauche), la description
       restant visible puisqu'il n'y a pas de survol sur tablette.
       Cible : largeur >= 601px ET (hover: none) -> n'affecte ni le
       bureau (hover) ni les téléphones (<= 600px).
       ============================================================ */
    @media (min-width: 601px) and (hover: none) {

      /* --- OFFRE 03 : bande horizontale --- */
      .offer-card.offer-standalone {
        aspect-ratio: auto;
        height: max(28vh, 300px);
        min-height: 28vh;
      }
      .offer-standalone .offer-img-placeholder {
        height: 100%;
        aspect-ratio: auto;
      }
      .offer-standalone .offer-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to right, rgba(10,10,10,0.94) 0%, rgba(10,10,10,0.88) 35%, rgba(10,10,10,0.5) 65%, rgba(10,10,10,0.1) 100%);
        justify-content: center;
        align-items: flex-start;
        padding: 48px 56px;
      }
      .offer-standalone .offer-number,
      .offer-standalone .offer-title,
      .offer-standalone .offer-cta { max-width: 58%; }
      .offer-standalone .offer-desc { max-width: 620px; }

      /* --- CARTE PASSION (personnalisation moto) : bande horizontale --- */
      .portfolio-passion-card {
        aspect-ratio: auto;
        height: 26vh;
        min-height: 200px;
      }
      .portfolio-passion-card .passion-img-placeholder {
        height: 100%;
        aspect-ratio: auto;
      }
      .portfolio-passion-card .passion-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to right, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.75) 35%, rgba(10,10,10,0.3) 65%, rgba(10,10,10,0.05) 100%);
        align-items: center;
        padding: 40px 56px;
      }
      .passion-content { max-width: 52%; }
    }