/* ══════════════════════════════════════════════════════════════
   QUATRE V2 — OFFRES (version « cartes SaaS »)
   Cover rouge sticky + cartes COMPARABLES par famille : nom serif,
   promesse, GROS prix, liste rouge, pour qui / résultat, CTA vers le
   drawer contact pré-rempli. UNE offre vedette (« Le plus demandé »,
   bord rouge + badge = ancrage). La famille à offre unique (Branding)
   passe en carte panoramique. Ancienne version liste éditoriale :
   _archive/offres-v1-liste-editoriale.md
   ═════════════════════════════════════════════════════════════ */

/* ── Bandeau sombre COMPACT (pas de cover 100vh : les prix doivent
   arriver vite au-dessus de la ligne de flottaison). Même nuit que le
   corps de page : une seule surface continue, le rouge reste un accent
   (badge vedette, contour énergie, CTA). ── */
.of-cover {
  background-color: var(--night);
  padding: calc(var(--nav-h) + clamp(28px, 5vh, 56px)) var(--pad-x) clamp(32px, 5.5vh, 64px);
}

.of-hero {
  color: var(--white);
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: min(880px, 100%);
}

.of-hero .mono-label {
  opacity: 0.6;
}

.of-title {
  font-size: clamp(36px, 4.2vw, 64px);
  line-height: 1.05;
  text-wrap: balance;
}

.of-sub {
  font-size: var(--lead-size);
  line-height: var(--lead-lh);
  max-width: 44ch;
  text-wrap: pretty;
}

/* ── Variante centrée (page Offres) : titre + caption au centre, lignes
   équilibrées (balance) → plus de césures disgracieuses ── */
.of-hero--center {
  margin-inline: auto;
  align-items: center;
  text-align: center;
}

.of-hero--center .of-title {
  /* assez large pour « des prix transparents. » sur UNE ligne : le titre
     casse en 2 lignes équilibrées (balance), jamais de mot orphelin */
  max-width: 24ch;
}

.of-hero--center .of-sub {
  max-width: 40ch;
  text-wrap: balance;
}

/* ── Ancres de famille : même composant que les filtres Travaux ── */
.of-anchors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.of-anchor {
  padding: 10px 20px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background-color: transparent;
  color: var(--white);
  font: inherit;
  font-size: 14px;
  line-height: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.of-anchor:hover {
  border-color: var(--white);
}

.of-anchor.is-active {
  background-color: var(--white);
  border-color: var(--white);
  color: var(--black);
}

/* Barre dockée (frostée, sous la nav) : pills en blanc sur fond sombre */
.of-dock {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  z-index: 90;
  display: flex;
  justify-content: center;
  padding: 12px var(--pad-x);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.35s ease, transform 0.35s var(--ease-out);
}

.of-dock.is-docked {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.of-dock-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  border-radius: 9999px;
  background-color: rgba(20, 20, 20, 0.6);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

/* (pills du dock : mêmes styles que le hero, désormais unifiés) */

/* ── Corps ── */
.of-body {
  position: relative;
  z-index: 1;
  background-color: var(--night);
  color: var(--white);
  padding: clamp(8px, 2vh, 24px) var(--pad-x) var(--section-gap);
  display: flex;
  flex-direction: column;
  gap: clamp(44px, 6.5vh, 88px);
}

/* ── Marquee logos clients (mêmes classes que les pages expertise) ── */
.exp-logos {
  overflow: hidden;
  padding: clamp(36px, 5.5vh, 56px) 0 clamp(12px, 2vh, 20px);
  /* fondu sur les extrémités : les logos apparaissent/disparaissent en douceur */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 clamp(48px, 8vw, 160px), #000 calc(100% - clamp(48px, 8vw, 160px)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 clamp(48px, 8vw, 160px), #000 calc(100% - clamp(48px, 8vw, 160px)), transparent 100%);
}

.exp-logos-track {
  display: flex;
  align-items: center;
  gap: clamp(56px, 5.8vw, 100px);
  width: max-content;
  animation: exp-marquee 46s linear infinite;
}

@keyframes exp-marquee {
  to { transform: translateX(-50%); }
}

.exp-logo {
  flex: 0 0 auto;
  height: clamp(44px, 4.6vw, 80px);
  display: flex;
  align-items: center;
}

.exp-logo img {
  height: 100%;
  width: auto;
  max-width: clamp(100px, 9.3vw, 160px);
  object-fit: contain;
}

.exp-logo span {
  font-family: var(--font-mono);
  font-size: clamp(15px, 1.2vw, 20px);
  letter-spacing: 0.12em;
  color: var(--white);
  white-space: nowrap;
}

.ofc-group {
  width: min(1280px, 100%);
  margin-inline: auto;
  /* l'ancre atterrit sous la nav + la barre dockée */
  scroll-margin-top: calc(var(--nav-h) + 76px);
}

.of-famille {
  font-size: clamp(28px, 2.6vw, 44px);
  line-height: 1.1;
  margin-bottom: clamp(18px, 2.6vh, 32px);
}

/* Mention légale HT : discrète, centrée sous les offres */
.of-note {
  width: min(1280px, 100%);
  margin-inline: auto;
  text-align: center;
  opacity: 0.5;
}

/* ── Grilles de cartes ──
   MÊME largeur de carte partout : la grille à 2 colonnes est
   dimensionnée pour que ses cartes fassent exactement la largeur
   d'une carte de la grille à 3 (2/3 du conteneur + 1 gouttière). */
.ofc-grid {
  --ofc-gap: clamp(16px, 1.6vw, 24px);
  display: grid;
  gap: var(--ofc-gap);
  align-items: stretch;
  padding-top: 14px; /* place pour le badge vedette qui déborde */
}

.ofc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ofc-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: calc((100% - 2 * var(--ofc-gap)) / 3 * 2 + var(--ofc-gap));
}
.ofc-grid--1 { grid-template-columns: 1fr; }

/* ── Carte ── */
.ofc {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vh, 24px);
  background-color: #212121;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: clamp(24px, 2.2vw, 36px);
  transition: border-color 0.3s ease, transform 0.4s var(--ease-out);
}

.ofc:hover {
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-3px);
}

/* ── Vedette : AURA-ORBE + badge — l'ancrage visuel de la gamme.
   Un orbe ÉTIRÉ EN RECTANGLE (shader WebGL « ring », js/orbs.js) est
   posé derrière la carte : bande vaporeuse qui épouse le contour, deux
   foyers chauds qui circulent, braises qui s'évaporent — exactement le
   langage des orbes du site (halo gaussien, grain, particules nettes).
   La carte opaque recouvre le centre : seule la lueur des bords vit. ── */
.ofc-aura-wrap {
  position: relative;
  display: flex; /* la carte remplit la cellule de grille */
}

.ofc-aura-wrap .ofc {
  flex: 1;
}

.ofc-aura {
  position: absolute;
  /* DOIT égaler AURA_M dans js/orbs.js (géométrie du rectangle shader) */
  inset: -56px;
  width: calc(100% + 112px);
  height: calc(100% + 112px);
  z-index: 0;
  pointer-events: none;
}

/* toutes les cartes passent AU-DESSUS de l'aura : la lueur ne vit que
   dans les gouttières et autour de la carte vedette, jamais par-dessus
   une carte voisine */
.ofc {
  z-index: 1;
}

.ofc--featured {
  background-color: #241f1f;
  border-color: rgba(255, 116, 82, 0.28); /* liseré braise discret */
}

.ofc--featured:hover {
  border-color: rgba(255, 116, 82, 0.5);
}

.ofc-badge {
  position: absolute;
  /* centre du badge posé PILE sur le bord haut de la carte */
  top: 0;
  transform: translateY(-50%);
  left: clamp(24px, 2.2vw, 36px);
  padding: 6px 14px;
  border-radius: 9999px;
  background-color: var(--brand);
  color: var(--white);
  /* typo : celle du sur-titre (.mono-label, posée dans le markup) */
}

.ofc-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ofc-name {
  font-size: clamp(23px, 1.9vw, 30px);
  line-height: 1.12;
}

.ofc-promise {
  font-size: clamp(14px, 1.02vw, 15px);
  line-height: 1.45;
  opacity: 0.72;
  text-wrap: pretty;
}

/* ── Prix : le héros de la carte ── */
.ofc-prix {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ofc-prix-pre {
  opacity: 0.55;
  min-height: 1em; /* garde l'alignement même sans « À partir de » */
}

.ofc-prix-main {
  font-size: clamp(30px, 2.6vw, 40px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.ofc-prix-ht {
  font-size: 14px;
  font-weight: 500;
  opacity: 0.55;
  margin-left: 6px;
  letter-spacing: 0.02em;
}

.ofc-prix-suf {
  font-size: 15px;
  opacity: 0.7;
  margin-left: 6px;
}

.ofc-dev {
  font-size: 13px;
  opacity: 0.55;
}

/* ── Contenu ── */
.ofc-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ofc-list-label {
  opacity: 0.55;
}

.ofc-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: clamp(14px, 1.02vw, 15px);
  line-height: 1.45;
}

.ofc-list li {
  padding-left: 16px;
  position: relative;
}

.ofc-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--brand);
}

.ofc-meta {
  font-size: 13.5px;
  line-height: 1.5;
  opacity: 0.72;
  text-wrap: pretty;
}

.ofc-meta strong {
  color: var(--white);
  font-weight: 600;
}

/* ── CTA : pleine largeur, ancré en bas de carte ── */
.ofc-cta {
  margin-top: auto;
  text-align: center;
  padding: 13px 24px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.ofc-cta:hover {
  background-color: var(--white);
  border-color: var(--white);
  color: var(--black);
}

.ofc--featured .ofc-cta {
  background-color: var(--brand);
  border-color: var(--brand);
}

.ofc--featured .ofc-cta:hover {
  background-color: var(--white);
  border-color: var(--white);
  color: var(--black);
}

/* ── Carte panoramique (famille à offre unique : Branding) ── */
.ofc--wide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  grid-template-areas:
    "head body"
    "cta  body";
  gap: clamp(20px, 2.6vw, 44px);
  align-items: start;
}

.ofc--wide .ofc-head { grid-area: head; }
.ofc--wide .ofc-body { grid-area: body; }
.ofc--wide .ofc-cta {
  grid-area: cta;
  align-self: end;
  justify-self: start;
  padding-inline: 40px;
}

/* ── Responsive ── */
@media (max-width: 1000px) {
  .ofc-grid--3,
  .ofc-grid--2 {
    grid-template-columns: 1fr;
    max-width: 560px;
  }

  .ofc--wide {
    display: flex;
    flex-direction: column;
  }

  .ofc--wide .ofc-cta {
    align-self: stretch;
    text-align: center;
  }
}

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