/**
 * ABK PLUS SARLAU — SYSTÈME DE DESIGN ARCHITECTURAL & ÉDITORIAL
 * Direction artistique : Premium contemporain, lumineux, chaleureux, international.
 * Palette : Navy #102532, Ivoire #F7F3EC, Blanc #FFFFFF, Sable #E7D8C4, Terracotta #A96345, Champagne #C5A269
 */

/* --------------------------------------------------------------------------
   00. VARIABLES & DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Nouvelle Palette Lumineuse & Chaleureuse */
  --c-navy: #102532;
  --c-navy-deep: #0b1a24;
  --c-navy-soft: #183344;
  --c-ivory: #F7F3EC;
  --c-ivory-warm: #FAF8F4;
  --c-white: #FFFFFF;
  --c-sand: #E7D8C4;
  --c-sand-light: #F3ECE2;
  --c-terracotta: #A96345;
  --c-terracotta-hover: #925337;
  --c-terracotta-soft: rgba(169, 99, 69, 0.12);
  --c-champagne: #C5A269;
  --c-champagne-light: #DFCA9B;
  --c-champagne-soft: rgba(197, 162, 105, 0.15);
  --c-champagne-border: rgba(197, 162, 105, 0.35);
  --c-gray: #5E6870;
  --c-gray-light: #8E98A0;
  --c-gray-hairline: rgba(16, 37, 50, 0.08);
  --c-gray-hairline-dark: rgba(255, 255, 255, 0.1);
  --c-black: #111820;

  /* Typographies */
  --font-heading: 'Plus Jakarta Sans', 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Échelle Typographique Harmonisée */
  --fs-h1: clamp(2.3rem, 4.3vw, 3.8rem);
  --fs-h2: clamp(1.85rem, 3.1vw, 2.6rem);
  --fs-h3: clamp(1.25rem, 1.9vw, 1.65rem);
  --fs-body: clamp(0.96rem, 1.05vw, 1.05rem);
  --fs-small: 0.85rem;
  --fs-label: 0.72rem;

  /* Transitions & Ombres */
  --t-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --t-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --t-slow: 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-subtle: 0 4px 20px rgba(16, 37, 50, 0.05);
  --shadow-card: 0 12px 36px rgba(16, 37, 50, 0.07);
  --shadow-hover: 0 20px 50px rgba(16, 37, 50, 0.12);
  --shadow-modal: 0 30px 80px rgba(11, 26, 36, 0.6);

  --header-h: 80px;
  --container-max: 1280px;
}

/* --------------------------------------------------------------------------
   01. RÉINITIALISATION & STYLES DE BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--c-navy);
  background-color: var(--c-ivory-warm);
  overflow-x: hidden;
}

img, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast);
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

ul, ol {
  list-style: none;
}

/* Conteneur Grille Générale */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(20px, 4vw, 48px);
  padding-right: clamp(20px, 4vw, 48px);
}

.section {
  padding-top: clamp(70px, 8vw, 110px);
  padding-bottom: clamp(70px, 8vw, 110px);
  position: relative;
}

/* --------------------------------------------------------------------------
   02. COMPOSANTS TYPOGRAPHIQUES & BARRES DE CHAPITRE
   -------------------------------------------------------------------------- */
.section-chapter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(24px, 3.5vw, 36px);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--c-terracotta);
  text-transform: uppercase;
}

.chapter-num {
  font-family: monospace;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--c-terracotta);
}

.chapter-slash {
  color: var(--c-champagne);
  opacity: 0.6;
}

.chapter-title {
  color: var(--c-navy);
}

.chapter-line {
  flex-grow: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(169, 99, 69, 0.25), transparent);
  margin-left: 8px;
}

.header-pre-title {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-terracotta);
  display: block;
  margin-bottom: 10px;
}

.section-main-heading {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--c-navy);
  margin-bottom: 16px;
}

.section-sub-paragraph {
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--c-gray);
  max-width: 680px;
}

/* --------------------------------------------------------------------------
   03. BOUTONS ARCHITECTURAUX
   -------------------------------------------------------------------------- */
.btn-architectural {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 15px 28px;
  font-family: var(--font-heading);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all var(--t-fast);
  border-radius: 1px;
  position: relative;
  white-space: nowrap;
}

.btn-primary-arch {
  background-color: var(--c-navy);
  color: var(--c-white);
  border: 1px solid var(--c-navy);
}

.btn-primary-arch:hover {
  background-color: var(--c-terracotta);
  border-color: var(--c-terracotta);
  color: var(--c-white);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(169, 99, 69, 0.25);
}

.btn-secondary-arch {
  background-color: transparent;
  color: var(--c-navy);
  border: 1px solid rgba(16, 37, 50, 0.25);
}

.btn-secondary-arch:hover {
  background-color: var(--c-navy);
  color: var(--c-white);
  border-color: var(--c-navy);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(16, 37, 50, 0.12);
}

/* --------------------------------------------------------------------------
   04. EN-TÊTE STICKY CORPORATE
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  background-color: rgba(250, 248, 244, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--c-gray-hairline);
  z-index: 1000;
  transition: background-color var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}

.site-header.scrolled {
  background-color: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 30px rgba(16, 37, 50, 0.06);
  border-bottom-color: rgba(16, 37, 50, 0.08);
}

.header-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand-link {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-heading);
}

.brand-monogram {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--c-navy);
}

.brand-plus {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--c-terracotta);
}

.brand-sub {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--c-champagne);
  padding-left: 2px;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 32px);
}

.header-nav .nav-item {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-navy);
  padding: 6px 0;
  position: relative;
  transition: color var(--t-fast);
}

.header-nav .nav-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--c-terracotta);
  transition: width var(--t-smooth);
}

.header-nav .nav-item:hover,
.header-nav .nav-item.active {
  color: var(--c-terracotta);
}

.header-nav .nav-item:hover::after,
.header-nav .nav-item.active::after {
  width: 100%;
}

.nav-shop-wrap {
  margin-left: 8px;
}

.nav-shop-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background-color: rgba(169, 99, 69, 0.08);
  border: 1px solid rgba(169, 99, 69, 0.25);
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--c-terracotta);
  border-radius: 1px;
}

.pill-badge {
  font-size: 0.62rem;
  padding: 2px 6px;
  background-color: var(--c-terracotta);
  color: var(--c-white);
  border-radius: 1px;
  font-weight: 800;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 40px;
  height: 40px;
  padding: 8px;
  z-index: 1100;
}

.menu-toggle .bar {
  width: 100%;
  height: 2px;
  background-color: var(--c-navy);
  transition: transform var(--t-fast), opacity var(--t-fast);
}

.menu-toggle.active .bar:nth-child(1) {
  transform: translateY(4px) rotate(45deg);
}

.menu-toggle.active .bar:nth-child(2) {
  transform: translateY(-4px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   05. HERO SECTION — LUMINEUX, SPECTACULAIRE, CHALEUREUX
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-h) + 36px);
  padding-bottom: 60px;
  background-color: var(--c-ivory-warm);
  overflow: hidden;
}

.hero-fine-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(16, 37, 50, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16, 37, 50, 0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  pointer-events: none;
}

.hero-layout {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
  position: relative;
  z-index: 2;
}

.hero-editorial {
  display: flex;
  flex-direction: column;
}

.hero-meta-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--c-terracotta);
  margin-bottom: 24px;
}

.meta-dot {
  width: 6px;
  height: 6px;
  background-color: var(--c-terracotta);
  border-radius: 50%;
}

.hero-monumental-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--c-navy);
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
}

.title-line {
  display: block;
}

.title-line-accent {
  color: var(--c-terracotta);
  font-style: italic;
  font-weight: 800;
}

.hero-summary {
  font-size: 1.15rem;
  line-height: 1.75;
  color: var(--c-gray);
  max-width: 580px;
  margin-bottom: 24px;
}

.hero-editorial-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--c-navy);
  margin-bottom: 32px;
  padding: 10px 16px;
  background-color: var(--c-sand-light);
  border-left: 3px solid var(--c-terracotta);
  width: fit-content;
}

.pill-sep {
  color: var(--c-champagne);
}

.hero-action-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}

.hero-bottom-indicators {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--c-gray-hairline);
}

.ind-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ind-label {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--c-gray-light);
}

.ind-val {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--c-navy);
}

.ind-divider {
  width: 1px;
  height: 28px;
  background-color: var(--c-gray-hairline);
}

/* Cadre Visuel Hero Lumineux */
.hero-visual-frame {
  display: flex;
  justify-content: flex-end;
}

.frame-technical-card {
  width: 100%;
  max-width: 520px;
  position: relative;
  background-color: var(--c-white);
  border: 1px solid var(--c-sand);
  box-shadow: 0 30px 70px rgba(16, 37, 50, 0.12);
  overflow: hidden;
}

.frame-photo-container {
  position: relative;
  width: 100%;
  height: clamp(440px, 52vh, 600px);
  overflow: hidden;
}

.frame-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}

.frame-technical-card:hover .frame-photo {
  transform: scale(1.03);
}

.frame-gradient-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(16, 37, 50, 0.85) 0%, rgba(16, 37, 50, 0.1) 50%, transparent 100%);
  pointer-events: none;
}

.frame-blueprint-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
}

.blueprint-corner {
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: var(--c-sand);
  border-style: solid;
}

.blueprint-corner.top-left { top: 12px; left: 12px; border-width: 2px 0 0 2px; }
.blueprint-corner.top-right { top: 12px; right: 12px; border-width: 2px 2px 0 0; }
.blueprint-corner.bottom-left { bottom: 12px; left: 12px; border-width: 0 0 2px 2px; }
.blueprint-corner.bottom-right { bottom: 12px; right: 12px; border-width: 0 2px 2px 0; }

.blueprint-tag {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--c-white);
  background: rgba(16, 37, 50, 0.85);
  padding: 6px 12px;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(231, 216, 196, 0.4);
}

.blueprint-coordinates {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--c-white);
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-scroll-cue {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--c-gray-light);
  transition: color var(--t-fast);
  z-index: 3;
}

.hero-scroll-cue:hover {
  color: var(--c-terracotta);
}

.cue-txt {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.24em;
}

.cue-line {
  width: 1px;
  height: 28px;
  background: linear-gradient(to bottom, var(--c-terracotta), transparent);
}

/* --------------------------------------------------------------------------
   06. SECTION 01 / PERSPECTIVE — À PROPOS
   -------------------------------------------------------------------------- */
.section-about {
  background-color: var(--c-white);
  border-top: 1px solid var(--c-gray-hairline);
  border-bottom: 1px solid var(--c-gray-hairline);
}

.about-editorial-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
}

.grand-statement {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--c-navy);
}

.about-quote-separator {
  width: 48px;
  height: 2px;
  background-color: var(--c-terracotta);
  margin: 32px 0;
}

.about-lead-paragraph {
  font-size: 1.15rem;
  line-height: 1.8;
  color: var(--c-gray);
  max-width: 560px;
}

.about-lead-paragraph strong {
  color: var(--c-navy);
  font-weight: 600;
}

.about-composition-col {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.about-image-card {
  border: 1px solid var(--c-sand);
  background-color: var(--c-ivory-warm);
  padding: 16px;
}

.about-image-wrap {
  position: relative;
  width: 100%;
  height: 280px;
  overflow: hidden;
}

.about-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-photo-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 60%, rgba(16, 37, 50, 0.35) 100%);
}

.about-image-caption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 14px;
}

.caption-id {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--c-terracotta);
}

.caption-desc {
  font-size: 0.9rem;
  color: var(--c-gray);
}

.about-specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.spec-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--c-gray-hairline);
}

.spec-code {
  font-family: monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--c-terracotta);
}

.spec-name {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--c-navy);
}

.spec-detail {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--c-gray);
}

/* --------------------------------------------------------------------------
   07. SECTION 02 / DOMAINES D'INTERVENTION — ACTIVITÉS
   (LES 3 ACTIVITÉS SONT TOUTES MISES EN VALEUR DANS UNE MOSAÏQUE ASYMÉTRIQUE)
   -------------------------------------------------------------------------- */
.section-activities {
  background-color: var(--c-ivory);
}

.activities-intro-flex {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: flex-end;
  margin-bottom: clamp(48px, 6vw, 72px);
}

.activities-asymmetric-mosaic {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 32px;
  align-items: stretch;
}

/* Carte Flagship : Promotion Immobilière */
.act-card-flagship {
  background-color: var(--c-white);
  border: 1px solid var(--c-sand);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform var(--t-smooth), box-shadow var(--t-smooth);
}

.act-card-flagship:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

.act-flagship-media {
  position: relative;
  width: 100%;
  height: clamp(300px, 36vh, 420px);
  overflow: hidden;
  background-color: var(--c-navy);
}

.act-flagship-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}

.act-card-flagship:hover .act-flagship-img {
  transform: scale(1.04);
}

.act-media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(16, 37, 50, 0.75) 0%, transparent 60%);
  pointer-events: none;
}

.act-badge-major {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background-color: var(--c-navy);
  border: 1px solid var(--c-sand);
  color: var(--c-sand-light);
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--c-terracotta);
}

.act-flagship-body {
  padding: clamp(32px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.act-num-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}

.act-num {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--c-terracotta);
}

.act-tag {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--c-gray-light);
  text-transform: uppercase;
}

.act-title {
  font-family: var(--font-heading);
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--c-navy);
  margin-bottom: 14px;
}

.act-desc-lead {
  font-size: 1.12rem;
  line-height: 1.6;
  font-weight: 600;
  color: var(--c-navy);
  margin-bottom: 12px;
}

.act-desc-sub {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--c-gray);
  margin-bottom: 24px;
}

.act-footer-link {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--c-gray-hairline);
}

.act-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-terracotta);
  transition: transform var(--t-fast);
}

.act-arrow-link:hover {
  transform: translateX(4px);
  color: var(--c-terracotta-hover);
}

/* Colonne Secondaire : Négoce & Import/Export */
.activities-secondary-column {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.act-card-secondary {
  background-color: var(--c-white);
  border: 1px solid var(--c-sand);
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  overflow: hidden;
  transition: transform var(--t-smooth), box-shadow var(--t-smooth);
}

.act-card-secondary:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

.act-secondary-media {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 220px;
  overflow: hidden;
  background-color: var(--c-navy);
}

.act-secondary-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}

.act-card-secondary:hover .act-secondary-img {
  transform: scale(1.04);
}

.act-mini-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 4px 10px;
  background: rgba(16, 37, 50, 0.85);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(231, 216, 196, 0.35);
  font-family: var(--font-heading);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--c-sand-light);
}

.act-secondary-body {
  padding: 28px;
  display: flex;
  flex-direction: column;
}

.act-card-secondary .act-title {
  font-size: 1.35rem;
  margin-bottom: 10px;
}

.act-card-secondary .act-desc-lead {
  font-size: 1rem;
  margin-bottom: 8px;
}

.act-card-secondary .act-desc-sub {
  font-size: 0.92rem;
  margin-bottom: 18px;
}

/* --------------------------------------------------------------------------
   08. SECTION 03 / MÉTHODOLOGIE — NOTRE APPROCHE (TIMELINE HORIZONTALE)
   -------------------------------------------------------------------------- */
.section-approach {
  background-color: var(--c-white);
  border-top: 1px solid var(--c-gray-hairline);
  border-bottom: 1px solid var(--c-gray-hairline);
}

.approach-intro-block {
  margin-bottom: clamp(48px, 6vw, 72px);
  max-width: 760px;
}

.architectural-timeline-ribbon {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 40px);
  position: relative;
  padding-top: 28px;
}

.timeline-axis-line {
  position: absolute;
  top: 28px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--c-sand) 15%, var(--c-terracotta) 85%, transparent);
  z-index: 1;
}

.timeline-milestone {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

.milestone-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
}

.milestone-num {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--c-terracotta);
}

.milestone-node {
  width: 10px;
  height: 10px;
  background-color: var(--c-white);
  border: 3px solid var(--c-terracotta);
  border-radius: 50%;
  margin-top: 2px;
}

.milestone-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--c-navy);
  margin-bottom: 10px;
}

.milestone-text {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--c-gray);
  margin-bottom: 16px;
}

.milestone-subtag {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-navy);
  padding-top: 12px;
  border-top: 1px solid var(--c-gray-hairline);
  display: block;
}

/* --------------------------------------------------------------------------
   09. HOMEPAGE HIGHLIGHT : RÉALISATIONS & OPPORTUNITÉS
   (FOND NAVY PROFOND LUXUEUX POUR UN EFFET GALERIE D'EXCEPTION)
   -------------------------------------------------------------------------- */
.section-portfolio-panorama {
  background-color: var(--c-navy);
  color: var(--c-ivory);
  border-top: 1px solid rgba(231, 216, 196, 0.2);
  border-bottom: 1px solid rgba(231, 216, 196, 0.2);
  position: relative;
  overflow: hidden;
}

.panorama-header-flex {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: flex-end;
  margin-bottom: clamp(48px, 6vw, 72px);
}

.section-portfolio-panorama .section-chapter-bar {
  color: var(--c-sand);
}

.section-portfolio-panorama .chapter-num {
  color: var(--c-sand);
}

.section-portfolio-panorama .chapter-title {
  color: var(--c-white);
}

.section-portfolio-panorama .header-pre-title {
  color: var(--c-sand);
}

.section-portfolio-panorama .section-main-heading {
  color: var(--c-white);
}

.section-portfolio-panorama .section-sub-paragraph {
  color: rgba(247, 243, 236, 0.75);
}

/* Grille Mosaïque Éditoriale Asymétrique */
.portfolio-editorial-mosaic {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
  align-items: stretch;
}

.mosaic-item {
  position: relative;
  background-color: var(--c-navy-soft);
  border: 1px solid rgba(231, 216, 196, 0.2);
  overflow: hidden;
  transition: transform var(--t-smooth), border-color var(--t-smooth), box-shadow var(--t-smooth);
}

.mosaic-item:hover {
  transform: translateY(-4px);
  border-color: var(--c-sand);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
}

.mosaic-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.mosaic-media-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: var(--c-navy-deep);
}

.mosaic-dominant .mosaic-media-container {
  height: clamp(380px, 45vh, 520px);
}

.mosaic-featured-secondary .mosaic-media-container {
  height: 240px;
}

.mosaic-sub-grid .mosaic-media-container {
  height: 190px;
}

.mosaic-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}

.mosaic-item:hover .mosaic-img {
  transform: scale(1.04);
}

.mosaic-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(16, 37, 50, 0.9) 0%, rgba(16, 37, 50, 0.2) 60%, transparent 100%);
  pointer-events: none;
}

/* Statuts Élégants Intégrés */
.mosaic-status-tag {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  background: rgba(16, 37, 50, 0.88);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--c-white);
  z-index: 2;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--c-sand);
}

.status-dot.pulse {
  animation: pulse-terracotta 2s infinite;
}

@keyframes pulse-terracotta {
  0% { box-shadow: 0 0 0 0 rgba(169, 99, 69, 0.7); }
  70% { box-shadow: 0 0 0 6px rgba(169, 99, 69, 0); }
  100% { box-shadow: 0 0 0 0 rgba(169, 99, 69, 0); }
}

.mosaic-status-tag.status-sold {
  border-color: rgba(197, 162, 105, 0.4);
  color: var(--c-sand);
}

.mosaic-status-tag.status-operating {
  border-color: rgba(169, 99, 69, 0.5);
  color: var(--c-ivory);
}

.mosaic-status-tag.status-for-sale {
  border-color: var(--c-sand);
  color: var(--c-sand);
}

.mosaic-status-tag.status-opportunity {
  border-color: rgba(231, 216, 196, 0.4);
  color: var(--c-sand);
}

.mosaic-ai-pill,
.mosaic-cadastral-pill {
  position: absolute;
  bottom: 12px;
  left: 12px;
  padding: 4px 10px;
  background: rgba(16, 37, 50, 0.88);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(231, 216, 196, 0.35);
  font-family: var(--font-heading);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--c-sand);
  z-index: 2;
}

.mosaic-caption {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background: var(--c-navy-soft);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.mosaic-top-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.mosaic-num {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--c-sand);
  letter-spacing: 0.05em;
}

.mosaic-category {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(247, 243, 236, 0.55);
}

.mosaic-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--c-white);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  line-height: 1.25;
}

.mosaic-dominant .mosaic-title {
  font-size: 1.65rem;
}

.mosaic-subtitle {
  font-size: 0.92rem;
  color: rgba(247, 243, 236, 0.72);
  margin-bottom: 14px;
}

.mosaic-cta-indicator {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--c-sand);
  transition: transform var(--t-fast);
}

.mosaic-item:hover .mosaic-cta-indicator {
  transform: translateX(4px);
}

.mosaic-right-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mosaic-sub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.mosaic-cadastral .cadastral-preview {
  object-fit: contain;
  background-color: var(--c-navy-deep);
  padding: 8px;
}

.panorama-action-row {
  margin-top: 48px;
  display: flex;
  justify-content: center;
}

.panorama-action-row .btn-primary-arch {
  background-color: var(--c-sand);
  color: var(--c-navy);
  border-color: var(--c-sand);
}

.panorama-action-row .btn-primary-arch:hover {
  background-color: var(--c-white);
  color: var(--c-navy);
  border-color: var(--c-white);
  box-shadow: 0 10px 30px rgba(231, 216, 196, 0.35);
}

/* --------------------------------------------------------------------------
   10. SECTION 04 / DOSSIER DÉTAILLÉ RÉALISATIONS (PHOTOS RÉELLES)
   -------------------------------------------------------------------------- */
.section-realisations {
  background-color: var(--c-ivory-warm);
}

.projects-editorial-grid {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 80px);
}

.project-showcase-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 3.5vw, 48px);
  background-color: var(--c-white);
  border: 1px solid var(--c-sand);
  padding: clamp(20px, 3vw, 40px);
  align-items: start;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  transition: border-color var(--t-smooth), box-shadow var(--t-smooth);
}

.project-showcase-panel:hover {
  border-color: var(--c-terracotta);
  box-shadow: var(--shadow-card);
}

.project-showcase-panel.showcase-reverse {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

.project-showcase-panel.showcase-reverse .showcase-visual-col {
  order: 2;
}

.project-showcase-panel.showcase-reverse .showcase-info-col {
  order: 1;
}

.showcase-visual-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.showcase-main-photo-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: clamp(320px, 40vh, 450px);
  overflow: hidden;
  background-color: var(--c-navy);
  border: 1px solid var(--c-sand);
  cursor: pointer;
  box-sizing: border-box;
}

.showcase-photo {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow), opacity 0.2s ease;
}

.showcase-main-photo-wrap:hover .showcase-photo {
  transform: scale(1.025);
}

.showcase-photo-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(16, 37, 50, 0.65) 0%, transparent 45%, rgba(16, 37, 50, 0.35) 100%);
  pointer-events: none;
  z-index: 1;
}

.showcase-status-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  background: rgba(16, 37, 50, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--c-sand);
  color: var(--c-white);
  z-index: 2;
  pointer-events: none;
}

.badge-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--c-sand);
}

.badge-status-dot.pulse {
  animation: pulse-terracotta 2s infinite;
}

.showcase-status-badge.status-sold {
  color: var(--c-sand);
}

.showcase-status-badge.status-active {
  color: var(--c-white);
}

.showcase-counter-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  background: rgba(16, 37, 50, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--c-sand);
  color: var(--c-ivory);
  z-index: 2;
  pointer-events: none;
}

.photo-idx-curr {
  color: var(--c-terracotta);
}

.inpage-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(16, 37, 50, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(231, 216, 196, 0.4);
  color: var(--c-white);
  font-size: 1.15rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
  opacity: 0.88;
  transition: opacity var(--t-fast), background var(--t-fast), transform var(--t-fast), border-color var(--t-fast);
}

.inpage-nav-arrow:hover {
  background: var(--c-terracotta);
  border-color: var(--c-terracotta);
  transform: translateY(-50%) scale(1.08);
  opacity: 1;
}

.inpage-nav-arrow.inpage-prev {
  left: 12px;
}

.inpage-nav-arrow.inpage-next {
  right: 12px;
}

/* Bouton Plein Écran visible et proéminent */
.btn-gallery-fullscreen {
  position: absolute;
  bottom: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: rgba(16, 37, 50, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(231, 216, 196, 0.45);
  color: var(--c-white);
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  z-index: 4;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast), color var(--t-fast);
}

.btn-gallery-fullscreen:hover {
  background: var(--c-terracotta);
  border-color: var(--c-terracotta);
  color: var(--c-white);
  transform: translateY(-2px);
}

/* Carrousel de vignettes compact et strictement contenu */
.gallery-thumbs-carousel {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.thumbs-nav-arrow {
  flex: 0 0 32px;
  width: 32px;
  height: 52px;
  background: var(--c-sand-light);
  border: 1px solid var(--c-sand);
  color: var(--c-navy);
  font-size: 0.88rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 0;
  padding: 0;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.thumbs-nav-arrow:hover {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: var(--c-sand);
}

.thumbs-viewport {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.thumbs-track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px 0;
  box-sizing: border-box;
  width: 100%;
}

.thumbs-track::-webkit-scrollbar {
  display: none;
}

/* Sur desktop, afficher 6 miniatures visibles dans la largeur (5 à 7 demandées) */
.thumb-btn {
  flex: 0 0 calc((100% - 40px) / 6);
  min-width: 0;
  max-width: calc((100% - 40px) / 6);
  height: 52px;
  padding: 0;
  background: none;
  border: 1px solid var(--c-sand);
  cursor: pointer;
  overflow: hidden;
  opacity: 0.7;
  box-sizing: border-box;
  border-radius: 0;
  transition: opacity var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}

.thumb-btn:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.thumb-btn.active {
  opacity: 1;
  border: 2px solid var(--c-terracotta);
  box-shadow: 0 3px 8px rgba(169, 99, 69, 0.35);
}

.thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Colonne d'informations */
.showcase-info-col {
  display: flex;
  flex-direction: column;
}

.showcase-num-tag {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

.s-num {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--c-terracotta);
}

.s-type {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--c-gray-light);
  text-transform: uppercase;
}

.showcase-title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 2.5vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--c-navy);
  line-height: 1.18;
  margin-bottom: 16px;
}

.showcase-summary {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--c-gray);
  margin-bottom: 20px;
}

/* Bloc Statut Mis en Valeur (Rééquilibrage de l'espace) */
.showcase-status-highlight-card {
  padding: 18px 20px;
  background-color: var(--c-sand-light);
  border-left: 3px solid var(--c-terracotta);
  margin-bottom: 24px;
}

.status-hl-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.status-hl-badge {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 3px 8px;
  color: var(--c-white);
}

.status-hl-badge.sold {
  background-color: var(--c-navy);
}

.status-hl-badge.active {
  background-color: var(--c-terracotta);
}

.status-hl-title {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--c-navy);
}

.status-hl-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--c-gray);
  margin: 0;
}

.showcase-data-specs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--c-gray-hairline);
  margin-top: auto;
}

.spec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(16, 37, 50, 0.1);
  font-size: 0.92rem;
}

.spec-k {
  color: var(--c-gray);
  font-weight: 500;
}

.spec-v {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--c-navy);
}

.showcase-gallery-cta-wrap {
  margin-top: 24px;
}

.btn-open-gallery {
  width: 100%;
  justify-content: center;
  cursor: pointer;
}

.spec-highlight-sold {
  color: var(--c-terracotta);
  font-weight: 800;
  letter-spacing: 0.08em;
}

.spec-highlight-active {
  color: var(--c-navy);
  font-weight: 800;
  letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   11. SECTION 05 / DOSSIER DÉTAILLÉ OPPORTUNITÉS FONCIÈRES
   -------------------------------------------------------------------------- */
.section-opportunites {
  background-color: var(--c-white);
  border-top: 1px solid var(--c-gray-hairline);
  border-bottom: 1px solid var(--c-gray-hairline);
}

.opportunites-layout-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 48px);
}

.opportunity-card {
  background-color: var(--c-ivory-warm);
  border: 1px solid var(--c-sand);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform var(--t-smooth), border-color var(--t-smooth), box-shadow var(--t-smooth);
}

.opportunity-card:hover {
  transform: translateY(-4px);
  border-color: var(--c-terracotta);
  box-shadow: var(--shadow-card);
}

.opportunity-media-wrap {
  position: relative;
  width: 100%;
  height: clamp(280px, 35vh, 380px);
  overflow: hidden;
  background-color: var(--c-navy);
}

.opportunity-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}

.opportunity-card:hover .opportunity-image {
  transform: scale(1.03);
}

.opportunity-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(16, 37, 50, 0.85) 0%, rgba(16, 37, 50, 0.15) 60%, transparent 100%);
  pointer-events: none;
}

.opportunity-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  background: rgba(16, 37, 50, 0.88);
  backdrop-filter: blur(8px);
  border: 1px solid var(--c-sand);
  color: var(--c-sand-light);
  z-index: 2;
}

.ai-disclaimer-box {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  background: rgba(16, 37, 50, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(231, 216, 196, 0.4);
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 2;
}

.ai-tag {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--c-sand);
  text-transform: uppercase;
}

.ai-text {
  font-size: 0.8rem;
  color: rgba(247, 243, 236, 0.85);
  line-height: 1.4;
}

/* Cadre du visuel cadastral */
.cadastral-media-wrap {
  background-color: var(--c-navy);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cadastral-svg {
  object-fit: contain;
  padding: 12px;
}

.cadastral-disclaimer {
  border-color: rgba(255, 255, 255, 0.15);
}

.opportunity-body {
  padding: clamp(28px, 3.5vw, 40px);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.opp-top-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}

.opp-code {
  font-family: monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--c-terracotta);
}

.opp-loc {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--c-gray-light);
}

.opportunity-title {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  font-weight: 800;
  color: var(--c-navy);
  letter-spacing: -0.015em;
  margin-bottom: 12px;
}

.opportunity-desc {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--c-gray);
  margin-bottom: 24px;
}

.opp-features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 18px 0;
  border-top: 1px solid var(--c-gray-hairline);
  border-bottom: 1px solid var(--c-gray-hairline);
  margin-bottom: 28px;
}

.opp-feature-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--c-navy);
  font-weight: 500;
}

.f-bullet {
  color: var(--c-terracotta);
  font-size: 0.75rem;
}

.opp-cta-row {
  margin-top: auto;
}

.btn-sm {
  padding: 12px 22px;
  font-size: 0.8rem;
}

/* --------------------------------------------------------------------------
   12. SECTION 06 / PRISE DE CONTACT
   -------------------------------------------------------------------------- */
.section-contact {
  background-color: var(--c-ivory-warm);
}

.contact-editorial-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(48px, 7vw, 96px);
  align-items: start;
}

.contact-heading-text {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3vw, 2.7rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--c-navy);
  margin-bottom: 24px;
}

.contact-context-desc {
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--c-gray);
  margin-bottom: 36px;
}

.contact-coordinates-card {
  padding: 32px;
  background-color: var(--c-white);
  border: 1px solid var(--c-sand);
  box-shadow: var(--shadow-subtle);
}

.coord-tag {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--c-terracotta);
  display: block;
  margin-bottom: 12px;
}

.coord-email-link {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--c-navy);
  display: inline-block;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--c-terracotta);
  transition: color var(--t-fast);
}

.coord-email-link:hover {
  color: var(--c-terracotta);
}

.coord-location-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--c-gray);
}

.loc-pin {
  width: 6px;
  height: 6px;
  background-color: var(--c-terracotta);
  border-radius: 50%;
}

/* Formulaire Architectural Minimaliste */
.arch-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.arch-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.arch-field.full-width {
  grid-column: span 2;
}

.arch-label {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-navy);
}

.arch-label .required {
  color: var(--c-terracotta);
}

.arch-input,
.arch-textarea {
  width: 100%;
  padding: 14px 18px;
  background-color: var(--c-white);
  border: 1px solid var(--c-sand);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--c-navy);
  border-radius: 1px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.arch-input:focus,
.arch-textarea:focus {
  outline: none;
  border-color: var(--c-terracotta);
  box-shadow: 0 0 0 3px rgba(169, 99, 69, 0.15);
}

.arch-textarea {
  resize: vertical;
  min-height: 120px;
}

.arch-form-footer {
  margin-top: 24px;
}

.btn-submit-arch {
  width: 100%;
}

.form-feedback {
  margin-top: 16px;
  font-size: 0.95rem;
}

.form-feedback.success {
  padding: 16px 20px;
  background-color: rgba(169, 99, 69, 0.12);
  border: 1px solid var(--c-terracotta);
  color: var(--c-navy);
}

.form-feedback.error {
  padding: 16px 20px;
  background-color: #FDE8E8;
  border: 1px solid #F98080;
  color: #9B1C1C;
}

/* --------------------------------------------------------------------------
   13. LIGHTBOX MODALE PLEIN ÉCRAN POUR LES GALERIES
   -------------------------------------------------------------------------- */
.lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: none;
  align-items: center;
  justify-content: center;
}

.lightbox-modal.active {
  display: flex;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(11, 26, 36, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.lightbox-dialog {
  position: relative;
  width: 96vw;
  max-width: 1300px;
  height: 94vh;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.lightbox-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(231, 216, 196, 0.2);
}

.lightbox-meta-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lb-badge {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  padding: 4px 10px;
  background-color: var(--c-terracotta);
  color: var(--c-white);
}

.lb-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-ivory);
}

.lb-counter {
  font-family: monospace;
  font-size: 0.88rem;
  color: var(--c-champagne);
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(231, 216, 196, 0.25);
}

.lightbox-close-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(231, 216, 196, 0.3);
  color: var(--c-sand);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}

.lightbox-close-btn:hover {
  background: var(--c-terracotta);
  border-color: var(--c-terracotta);
  color: var(--c-white);
  transform: scale(1.08);
}

.lightbox-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: 10px 0;
  overflow: hidden;
}

.lightbox-viewport {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  max-height: 68vh;
  padding: 0 16px;
}

.lightbox-active-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(231, 216, 196, 0.25);
  transition: opacity 0.12s ease;
}

.lightbox-nav-btn {
  background: rgba(16, 37, 50, 0.75);
  border: 1px solid rgba(231, 216, 196, 0.4);
  color: var(--c-white);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: background var(--t-fast), transform var(--t-fast);
  flex-shrink: 0;
}

.lightbox-nav-btn:hover {
  background: var(--c-terracotta);
  border-color: var(--c-terracotta);
  transform: scale(1.1);
}

.lightbox-bottom-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.lightbox-caption {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  color: var(--c-ivory);
  text-align: center;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lightbox-thumbs-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  justify-content: center;
  padding: 4px 0;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.lb-thumb-btn {
  width: 52px;
  height: 38px;
  min-width: 52px;
  flex-shrink: 0;
  padding: 0;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  overflow: hidden;
  opacity: 0.5;
  transition: opacity var(--t-fast), border-color var(--t-fast);
}

.lb-thumb-btn.active {
  opacity: 1;
  border: 2px solid var(--c-terracotta);
}

.lb-thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   14. FOOTER MONUMENTAL & CHALEUREUX
   -------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--c-navy);
  color: var(--c-ivory);
  border-top: 1px solid rgba(231, 216, 196, 0.2);
  padding-top: clamp(70px, 9vw, 110px);
  padding-bottom: 48px;
}

.footer-hero-band {
  padding-bottom: clamp(40px, 5vw, 64px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: clamp(40px, 5vw, 64px);
}

.footer-monumental-brand {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 16px;
}

.f-brand-text {
  font-family: var(--font-heading);
  font-size: clamp(2.8rem, 6vw, 5.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--c-white);
  line-height: 1;
}

.f-brand-legal {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 1.8vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--c-sand);
}

.footer-signature-statement {
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  color: var(--c-sand);
  font-style: italic;
}

.footer-columns-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr;
  gap: clamp(28px, 4vw, 52px);
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.f-col-heading {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-sand);
  display: block;
  margin-bottom: 22px;
}

.f-entity-data {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.9rem;
  color: rgba(247, 243, 236, 0.75);
  margin-bottom: 20px;
}

.f-entity-data strong {
  color: var(--c-white);
  font-weight: 600;
}

.f-email-link {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--c-ivory);
  border-bottom: 1px solid var(--c-sand);
  padding-bottom: 3px;
  display: inline-block;
}

.f-email-link:hover {
  color: var(--c-terracotta);
  border-bottom-color: var(--c-terracotta);
}

.f-link-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.f-link-list a {
  font-size: 0.95rem;
  color: rgba(247, 243, 236, 0.72);
  transition: color var(--t-fast), padding-left var(--t-fast);
}

.f-link-list a:hover {
  color: var(--c-white);
  padding-left: 4px;
}

.f-shop-item {
  padding-top: 8px;
}

.f-shop-pill {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--c-sand);
}

.f-badge {
  font-size: 0.65rem;
  color: rgba(247, 243, 236, 0.6);
}

.footer-bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  font-size: 0.88rem;
  color: rgba(247, 243, 236, 0.6);
  flex-wrap: wrap;
  gap: 16px;
}

.f-subline-links {
  display: flex;
  align-items: center;
  gap: 14px;
}

.f-subline-links a {
  color: rgba(247, 243, 236, 0.6);
  transition: color var(--t-fast);
}

.f-subline-links a:hover {
  color: var(--c-sand);
}

.f-dot {
  color: rgba(255, 255, 255, 0.2);
}

/* --------------------------------------------------------------------------
   15. ANIMATIONS AU SCROLL
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }

/* --------------------------------------------------------------------------
   16. RESPONSIVE DESIGN ADAPTATIF COMPLET (DESKTOP, TABLETTE, MOBILE)
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .hero-layout {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  .hero-editorial {
    order: 1;
  }

  .hero-visual-frame {
    order: 2;
    width: 100%;
    justify-content: center;
  }

  .frame-technical-card {
    max-width: 100%;
  }

  .hero-bottom-indicators {
    order: 3;
    width: 100%;
  }

  .about-editorial-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .activities-intro-flex {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .activities-asymmetric-mosaic {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .architectural-timeline-ribbon {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 48px;
  }

  .timeline-axis-line {
    display: none;
  }

  .panorama-header-flex {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .portfolio-editorial-mosaic {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .mosaic-dominant .mosaic-media-container {
    height: 380px;
  }

  .project-showcase-panel,
  .project-showcase-panel.showcase-reverse {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: clamp(20px, 3vw, 32px);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  .showcase-info-col {
    display: contents;
  }

  /* Ordre mobile strict demandé :
     1. Titre du projet
     2. Description
     3. Grande photo + Miniatures navigables
     4. Informations complémentaires
  */
  .showcase-num-tag { order: 1; margin-bottom: 2px; }
  .showcase-title { order: 2; margin-bottom: 8px; }
  .showcase-summary { order: 3; margin-bottom: 16px; }
  .showcase-visual-col { order: 4; width: 100%; max-width: 100%; margin-bottom: 18px; }
  .showcase-status-highlight-card { order: 5; margin-bottom: 16px; width: 100%; }
  .showcase-data-specs { order: 6; margin-bottom: 18px; width: 100%; }
  .showcase-gallery-cta-wrap { order: 7; width: 100%; }

  .showcase-main-photo-wrap {
    height: clamp(260px, 46vw, 360px);
  }

  .thumb-btn {
    flex: 0 0 calc((100% - 32px) / 5);
    max-width: calc((100% - 32px) / 5);
    height: 50px;
  }

  .opportunites-layout-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-columns-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px;
  }
}

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

  .header-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: 320px;
    height: 100vh;
    background-color: var(--c-navy);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 48px;
    gap: 24px;
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.5);
    transition: right var(--t-smooth);
    z-index: 1050;
    border-left: 1px solid var(--c-sand);
  }

  .header-nav.active {
    right: 0;
  }

  .header-nav .nav-item {
    font-size: 1.15rem;
    color: var(--c-ivory);
  }

  .header-nav .nav-item:hover,
  .header-nav .nav-item.active {
    color: var(--c-sand);
  }

  .nav-shop-wrap {
    margin-left: 0;
    margin-top: 12px;
  }

  .hero-bottom-indicators {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .ind-divider {
    display: none;
  }

  .act-card-secondary {
    grid-template-columns: 1fr;
  }

  .act-secondary-media {
    min-height: 200px;
  }

  .architectural-timeline-ribbon {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .mosaic-sub-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .mosaic-dominant .mosaic-media-container {
    height: 260px;
  }

  .mosaic-featured-secondary .mosaic-media-container,
  .mosaic-sub-grid .mosaic-media-container {
    height: 220px;
  }

  .opp-features-grid {
    grid-template-columns: 1fr;
  }

  /* Galeries in-page tactiles */
  .inpage-nav-arrow {
    opacity: 0.95;
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }

  .inpage-nav-arrow.inpage-prev {
    left: 8px;
  }

  .inpage-nav-arrow.inpage-next {
    right: 8px;
  }

  .btn-gallery-fullscreen {
    bottom: 10px;
    right: 10px;
    padding: 6px 11px;
    font-size: 0.64rem;
  }

  .gallery-thumbs-carousel {
    gap: 6px;
  }

  .thumbs-nav-arrow {
    flex: 0 0 28px;
    width: 28px;
    height: 46px;
    font-size: 0.82rem;
  }

  .thumbs-track {
    gap: 6px;
  }

  /* Sur smartphone / tablette étroite, afficher 4 miniatures visibles (3 à 4 demandées) */
  .thumb-btn {
    flex: 0 0 calc((100% - 18px) / 4);
    min-width: 0;
    max-width: calc((100% - 18px) / 4);
    height: 46px;
  }

  .showcase-status-highlight-card {
    padding: 14px 16px;
    margin-bottom: 16px;
  }

  /* Lightbox sur tablette et mobile */
  .lightbox-dialog {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
  }

  .lightbox-top-bar {
    padding: 8px 12px;
  }

  .lb-title {
    font-size: 0.88rem;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .lb-badge {
    display: none;
  }

  .lightbox-stage {
    padding: 4px 0;
  }

  .lightbox-viewport {
    max-height: 58vh;
    padding: 0 4px;
  }

  .lightbox-nav-btn {
    width: 40px;
    height: 40px;
    background: rgba(16, 37, 50, 0.88);
  }

  .lightbox-bottom-panel {
    padding: 8px 12px;
  }

  .lightbox-caption {
    font-size: 0.8rem;
  }

  .lb-thumb-btn {
    width: 44px;
    height: 32px;
    min-width: 44px;
  }

  .contact-editorial-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .arch-form-grid {
    grid-template-columns: 1fr;
  }

  .arch-field.full-width {
    grid-column: span 1;
  }

  .footer-columns-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .footer-bottom-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .hero-scroll-cue {
    display: none;
  }
}

/* Optimisation smartphone stricte (390px, 375px, 360px) */
@media (max-width: 480px) {
  :root {
    --container-pad: 16px;
    --fs-h1: 2.15rem;
    --fs-h2: 1.65rem;
    --fs-h3: 1.2rem;
  }

  body {
    overflow-x: hidden;
  }

  .hero {
    padding-top: calc(var(--header-h) + 20px);
    padding-bottom: 44px;
  }

  .hero-editorial-pills {
    font-size: 0.65rem;
    padding: 8px 12px;
    line-height: 1.5;
    margin-bottom: 24px;
  }

  .hero-action-group {
    flex-direction: column;
    width: 100%;
    gap: 12px;
    margin-bottom: 28px;
  }

  .hero-action-group .btn-architectural {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }

  .frame-photo-container {
    height: 260px;
  }

  .blueprint-tag,
  .blueprint-coordinates {
    font-size: 0.62rem;
    padding: 6px 8px;
  }

  .section {
    padding-top: 52px;
    padding-bottom: 52px;
  }

  .section-header-editorial {
    margin-bottom: 32px;
  }

  .grand-statement {
    font-size: 1.6rem;
  }

  .project-showcase-panel,
  .project-showcase-panel.showcase-reverse {
    padding: 16px 12px;
    gap: 16px;
  }

  .showcase-main-photo-wrap {
    height: clamp(210px, 56vw, 260px);
  }

  .inpage-nav-arrow {
    width: 34px;
    height: 34px;
    font-size: 0.95rem;
  }

  .inpage-nav-arrow.inpage-prev { left: 6px; }
  .inpage-nav-arrow.inpage-next { right: 6px; }

  .btn-gallery-fullscreen {
    bottom: 8px;
    right: 8px;
    padding: 5px 9px;
    font-size: 0.6rem;
  }

  .showcase-counter-badge {
    top: 8px;
    left: 8px;
    padding: 4px 8px;
    font-size: 0.65rem;
  }

  .showcase-status-badge {
    top: 8px;
    right: 8px;
    padding: 4px 8px;
    font-size: 0.62rem;
  }

  .gallery-thumbs-carousel {
    gap: 5px;
  }

  .thumbs-track {
    gap: 5px;
  }

  .thumb-btn {
    flex: 0 0 calc((100% - 15px) / 4);
    min-width: 0;
    max-width: calc((100% - 15px) / 4);
    height: 42px;
  }

  .thumbs-nav-arrow {
    flex: 0 0 24px;
    width: 24px;
    height: 42px;
    font-size: 0.75rem;
  }

  .showcase-num-tag .s-num {
    font-size: 1.8rem;
  }

  .showcase-title {
    font-size: 1.45rem;
  }

  .showcase-summary {
    font-size: 0.95rem;
  }

  .spec-row {
    font-size: 0.85rem;
  }

  .btn-open-gallery {
    min-height: 48px;
    font-size: 0.85rem;
  }

  .mosaic-item .mosaic-media-container {
    height: 210px !important;
  }

  .opp-top-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .opportunity-title {
    font-size: 1.35rem;
  }

  .coord-email-link {
    font-size: 1.15rem;
    word-break: break-all;
  }

  .arch-input,
  .arch-textarea {
    font-size: 16px; /* Empêche le zoom auto sur iPhone/Safari */
    min-height: 48px;
    padding: 12px 14px;
  }

  .btn-submit-arch {
    min-height: 48px;
    font-size: 0.88rem;
  }

  .f-brand-text {
    font-size: 2.4rem;
  }
}