/* ============================================
   LE CAGIBI — Pages secondaires (services, réalisations, à propos, légal)
   Le hero `.hero--page` étend `.hero` (style.css) avec une hauteur réduite.
   ============================================ */

/* ─── Hero text-only (pages légales uniquement) ─── */
.page-hero {
  padding: 72px clamp(1.5rem, 5vw, 4rem) 56px;
  background: linear-gradient(160deg, var(--cream-dark) 0%, var(--cream) 80%);
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.page-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  margin-bottom: 16px;
}
.page-hero .page-lead {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--body);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.65;
}

/* ─── Hero bannière (services, réalisations, à propos) ─── */
/* Modificateur de `.hero` (style.css) : même image main-banner, hauteur réduite et fluide */
.hero--page {
  min-height: clamp(360px, 50vh, 500px);
  align-items: flex-start;
}
.hero--page .hero-content {
  padding: clamp(72px, 10vw, 96px) clamp(1.25rem, 5vw, 4rem) clamp(48px, 6vw, 72px);
  max-width: 760px;
}
/* Landscape mobile : ne mange pas tout l'écran */
@media (max-height: 500px) and (orientation: landscape) {
  .hero--page { min-height: 100vh; }
  .hero--page .hero-content { padding-top: clamp(64px, 12vh, 88px); padding-bottom: 32px; }
}

/* ─── Section wrappers ─── */
.page-section {
  padding: 80px 0;
  background: var(--cream);
}
.page-section--alt { background: #fff; }

.section-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 4rem);
}
.section-head {
  text-align: center;
  margin-bottom: 52px;
}
.section-head h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 12px;
}
.section-head p {
  font-size: 16px;
  color: var(--body);
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ─── Offer cards ─── */
/* Auto-fit : 3 colonnes sur grand écran, descend à 1 col en dessous de ~580px (300px min × 2 + gap) */
.offers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 20px;
}
.offer-card {
  background: var(--cream);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
  transition: transform 0.18s, box-shadow 0.18s;
}
.offer-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}
.offer-card--blue   { border-color: var(--border-blue); }
.offer-card--yellow { border-color: var(--border-yellow); }
.offer-card--green  { border-color: var(--border-green); }

.offer-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  margin-bottom: 20px;
}
.offer-chip--blue   { background: var(--blue-light); }
.offer-chip--yellow { background: var(--orange-light); }
.offer-chip--green  { background: var(--green-light); }

.offer-title {
  font-family: 'Sora', sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
}
.offer-desc {
  font-size: 13.5px;
  color: var(--body);
  line-height: 1.6;
  margin-bottom: 20px;
}
.offer-features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.offer-feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--body);
  line-height: 1.5;
}
.offer-feature::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}
.offer-card--blue   .offer-feature::before { background: var(--blue); }
.offer-card--yellow .offer-feature::before { background: var(--yellow); }
.offer-card--green  .offer-feature::before { background: var(--green); }

.offer-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.15px;
  padding: 11px 22px;
  border-radius: var(--radius-full);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.18s ease,
              filter 0.18s ease;
  align-self: flex-start;
  text-decoration: none;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.16), 0 1px 2px rgba(0,0,0,0.10);
}
.offer-cta svg {
  flex-shrink: 0;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.offer-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.20), 0 2px 6px rgba(0,0,0,0.10);
  filter: brightness(1.08);
}
.offer-cta:hover svg { transform: translateX(4px); }
.offer-cta--blue   { background: var(--blue); }
.offer-cta--yellow { background: var(--yellow); }
.offer-cta--green  { background: #2e7040; }

/* ─── Process steps ─── */
.process-steps {
  display: flex;
  flex-direction: column;
  max-width: 720px;
  margin: 0 auto;
  position: relative;
}
.process-steps::before {
  content: '';
  position: absolute;
  left: 23px;
  top: 48px;
  bottom: 48px;
  width: 2px;
  background: linear-gradient(180deg, rgba(55,106,183,0.3) 0%, rgba(255,169,89,0.3) 100%);
}
.step {
  display: flex;
  gap: 24px;
  padding-bottom: 32px;
  position: relative;
}
.step:last-child { padding-bottom: 0; }
.step-num {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: 'Sora', sans-serif;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 14px rgba(23,28,46,0.2);
}
.step-body {
  flex: 1;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  box-shadow: var(--shadow);
  margin-top: 2px;
}
.step-body h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}
.step-body p {
  font-size: 14px;
  color: var(--body);
  line-height: 1.6;
  margin: 0;
}

/* ─── Portfolio — regroupement par catégorie ─── */
.portfolio-groups {
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.portfolio-category { scroll-margin-top: 90px; }

.category-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 26px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.category-eyebrow {
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(57, 64, 82, 0.32);
  line-height: 1;
}
.category-title {
  font-family: 'Sora', sans-serif;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.1;
  margin: 0;
}

/* ─── Portfolio — tuiles de marque ─── */
/* Chaque carte pilote sa couleur via la variable --brand (inline). */
/* Auto-fill : descend de 3 à 2 à 1 col selon la largeur dispo. */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 22px;
}

.project-card {
  --brand: var(--navy);
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  will-change: transform;
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.38s ease;
}
/* Liseré de marque qui apparaît au survol */
.project-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1.5px transparent;
  transition: box-shadow 0.32s ease;
}
.project-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.project-card:hover::after {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 42%, transparent);
}

/* ── Zone média (haut de carte) ── */
.project-media {
  position: relative;
  height: 210px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Variante claire : logos réels + icônes de projets nommés */
.project-media--light {
  background: radial-gradient(ellipse 86% 78% at 50% 36%,
              color-mix(in srgb, var(--brand) 9%, #fff) 0%, #fff 74%);
  border-bottom: 1px solid var(--border);
}
.project-media--light::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(165deg,
              rgba(255, 255, 255, 0.48) 0%,
              rgba(255, 255, 255, 0.08) 42%,
              rgba(255, 255, 255, 0) 72%);
  opacity: 0.35;
  transition: opacity 0.38s ease;
}
.project-media--light::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg,
              color-mix(in srgb, var(--brand) 85%, transparent),
              color-mix(in srgb, var(--brand) 32%, transparent));
}

/* Variante sombre : projets confidentiels (anonymisés) */
.project-media--dark {
  color: rgba(255, 255, 255, 0.85);
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--brand) 36%, #0a0e1c) 0%,
              color-mix(in srgb, var(--brand) 72%, #0a0e1c) 100%);
}
.project-media--dark::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 85% at 76% 16%,
              color-mix(in srgb, var(--brand) 65%, transparent) 0%, transparent 60%);
  opacity: 0.5;
}

/* Logo client */
.project-logo {
  position: relative;
  z-index: 1;
  max-width: 66%;
  max-height: 54%;
  width: auto;
  object-fit: contain;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.project-card:hover .project-logo { transform: scale(1.05); }

.project-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
  transform: translateZ(0);
  transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), filter 0.42s ease;
}
.project-media--light .project-image {
  object-fit: cover;
  object-position: center;
}
.project-card:hover .project-media--light .project-image {
  transform: translateZ(0) scale(1.04);
  filter: saturate(1.04) contrast(1.02);
}
.project-card:hover .project-media--dark .project-image { transform: translateZ(0) scale(1.03); }
.project-card:hover .project-media--light::before { opacity: 0.15; }

/* Icône (couleur de marque sur clair, blanc sur sombre via currentColor) */
.project-icon {
  position: relative;
  z-index: 1;
  width: 52px;
  height: 52px;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.project-media--light .project-icon { color: var(--brand); }
.project-card:hover .project-icon { transform: scale(1.1); }

/* Badge statut */
.project-badge {
  position: absolute;
  top: 13px;
  right: 13px;
  z-index: 2;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.project-badge--live {
  background: rgba(255, 255, 255, 0.92);
  color: #1f8040;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.project-badge--confidentiel {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  padding: 5px 12px 5px 10px;
  background: rgba(10, 14, 28, 0.78);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.project-badge--confidentiel .badge-lock {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  opacity: 0.95;
}

/* ── Corps de carte ── */
.project-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.project-date {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(57, 64, 82, 0.45);
  margin: 0 0 9px;
}
.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 11px;
}
.project-tag {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  color: color-mix(in srgb, var(--brand) 76%, var(--navy));
  background: color-mix(in srgb, var(--brand) 11%, #fff);
  border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
}
.project-name {
  font-family: 'Sora', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
  margin-bottom: 8px;
}
.project-desc {
  font-size: 13px;
  color: var(--body);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
.project-url {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  padding: 9px 16px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 700;
  color: color-mix(in srgb, var(--brand) 82%, var(--navy));
  background: color-mix(in srgb, var(--brand) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  transition: gap 0.2s ease, background 0.28s ease, color 0.28s ease,
              border-color 0.28s ease, box-shadow 0.28s ease;
}
/* Au survol de la carte, le bouton se remplit de la couleur de marque */
.project-card:hover .project-url {
  gap: 11px;
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--brand) 28%, transparent);
}

/* ── Carte entièrement cliquable (uniquement si elle a un lien projet) ── */
.project-card:has(.project-url) { cursor: pointer; }
.project-card .project-url::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
}

.coming-banner {
  background: var(--orange-light);
  border: 1.5px dashed rgba(255,169,89,0.5);
  border-radius: var(--radius);
  padding: 32px 28px;
  text-align: center;
  margin-top: 40px;
}
.coming-banner h3 {
  font-family: 'Sora', sans-serif;
  font-size: 17px;
  color: var(--navy);
  margin-bottom: 8px;
}
.coming-banner p { font-size: 14px; color: var(--body); margin: 0; }

/* Note : sections team/manifesto/principes de la page « À propos » sont
   stylées dans assets/css/qui-sommes-nous.css (feuille page-specific). */

/* ─── Page CTA ─── */
.page-cta {
  padding: 80px clamp(1.5rem, 5vw, 4rem);
  background: linear-gradient(155deg, var(--navy) 0%, #1c2540 100%);
  text-align: center;
}
.page-cta h2 {
  color: #fff;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  margin-bottom: 14px;
}
.page-cta p {
  color: rgba(255,247,240,0.72);
  font-size: 16px;
  max-width: 460px;
  margin: 0 auto 28px;
  line-height: 1.65;
}
.page-cta .eyebrow {
  color: rgba(255,204,56,0.85);
  margin-bottom: 10px;
}
.cta-btns { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; }

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--orange);
  color: var(--navy);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: var(--radius-full);
  transition: background 0.15s, transform 0.15s;
}
.btn-primary:hover { background: #ffb76e; transform: translateY(-2px); }

.btn-outline-light {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: rgba(255,247,240,0.8);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 26px;
  border-radius: var(--radius-full);
  border: 1.5px solid rgba(255,247,240,0.25);
  transition: border-color 0.15s, color 0.15s;
}
.btn-outline-light:hover { border-color: rgba(255,247,240,0.6); color: #fff; }

/* ─── Responsive ─── */

/* ─ 900 px : tablette ─ */
/* Offers-grid + portfolio-grid sont en auto-fit : pas besoin de breakpoint explicite */
@media (max-width: 900px) {
  .section-head { margin-bottom: 40px; }
}

/* ─ 768 px : mobile ─ */
@media (max-width: 768px) {
  .page-section  { padding: 64px 0; }
  .section-head  { margin-bottom: 32px; }

  .coming-banner { margin-top: 28px; padding: 24px 20px; }

  .page-cta    { padding: 64px 1.5rem; }
  .page-cta h2 { font-size: clamp(1.4rem, 5vw, 2rem); }
  .cta-btns    { gap: 10px; }
}

/* ─ 600 px : petits mobiles ─ */
@media (max-width: 600px) {
  .page-hero       { padding: 48px 1.25rem 40px; }
  .page-hero h1    { font-size: clamp(1.75rem, 7vw, 2.25rem); }

  .page-section    { padding: 48px 0; }
  .section-head h2 { font-size: clamp(1.4rem, 5vw, 1.75rem); }

  .page-cta { padding: 48px 1.25rem; }

  .project-media { height: 200px; }
  .portfolio-groups { gap: 48px; }
}

/* ─ 480 px : très petits écrans ─ */
@media (max-width: 480px) {
  .offer-card { padding: 24px 20px 20px; }

  /* Step : numéro plus petit + trait recentré */
  .step                { gap: 14px; }
  .step-num            { width: 40px; height: 40px; font-size: 16px; }
  .process-steps::before { left: 19px; }
  .step-body           { padding: 16px 18px; }

  .cta-btns          { flex-direction: column; }
  .btn-primary,
  .btn-outline-light { width: 100%; justify-content: center; }

  .page-cta { padding: 40px 1rem; }
}

/* ─ 380 px : iPhone SE ─ */
@media (max-width: 380px) {
  .page-hero h1 { font-size: 1.65rem; }
  .offer-title  { font-size: 17px; }
}