/* home.css — ce qui appartient EN PROPRE à la page d'accueil.
 *
 * Tout le reste vit dans style.css, partagé par l'ensemble des pages. Ici on
 * ne trouve que le hero scrollytelling du Cervin, qui n'existe que sur
 * l'accueil, et les quelques règles où l'accueil s'écarte volontairement du
 * gabarit commun.
 *
 * À charger APRÈS style.css.
 *
 * Extrait des deux balises <style> de index.html le 10-08-2026 :
 * 199 règles strictement identiques à style.css retirées, 65 conservées.
 */

html { font-size: 110%; }

html { scroll-behavior: smooth; }

.intro-quote {
    font-family: var(--quote);
    font-style: italic;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
}

.team-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-dim), var(--surface));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 1.4rem;
  color: var(--accent-pale);
  flex-shrink: 0;
  border: 1px solid rgba(75,95,143,0.2);
  overflow: hidden;
}

.team-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: 50%; display: block; }

.cta-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.3) brightness(0.62);
  opacity: 0.5;
}

/* HOME-SPECIFIC: original hero with URL bg */
  .hero-home::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(8,12,22,0.80) 0%, rgba(8,12,22,0.54) 30%, rgba(8,12,22,0.40) 55%, rgba(10,14,24,0.50) 80%, var(--bg) 100%),
      url('../webp/cervin-hero-v2.webp') center 45%/cover no-repeat;
    opacity: 1;
    pointer-events: none;
    filter: saturate(0.88) brightness(0.76);
  }

/* ============ MOTION & PREMIUM POLISH (2026-07) ============ */

.service-card, .value-item, .team-card, .office {
  transition: transform .55s cubic-bezier(.2,.7,.2,1), box-shadow .55s ease, border-color .55s ease, background .55s ease;
}

.service-card:hover, .value-item:hover, .team-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(0,0,0,0.38); }

.office:hover { transform: translateY(-3px); }

/* Swiss identity — subtle Cervin behind the Geneva HQ */
#offices { position: relative; overflow: hidden; }

#offices::before {
  content: ''; position: absolute; inset: 0;
  background: url('../webp/cervin2.webp') center 28%/cover no-repeat;
  opacity: 0.07; filter: saturate(0.4) brightness(0.7); pointer-events: none;
}

#offices > * { position: relative; z-index: 1; }

.hero-home .hero-content h1, .hero-home .hero-content .hero-sub, .hero-home .hero-label { text-shadow: 0 2px 30px rgba(6,10,18,0.85); }

.hero-label { color: rgba(255,255,255,0.9) !important; }

/* AUDIT DA 2026-07 — centrage cohérent des intros (home) */
.section-label, .section-title, .section-desc { text-align: center; }

.intro-left .section-label, .intro-left .section-title, .intro-left .section-desc {
  text-align: left; margin-left: 0; margin-right: 0;
}

/* Bureau unique Genève réellement centré */
.offices-single { display: flex !important; justify-content: center; }

.offices-single .office { max-width: 460px; }

/* Bureau unique : pas de cadre grille 3 colonnes, bloc adresse épuré centré */
.offices-single { display: block !important; background: none !important; border: none !important; }

.offices-single .office { max-width: 520px; margin-inline: auto; background: none !important; border: none !important; padding: 1.5rem 0; text-align: center; }

/* Anim premium : cascade + smooth scroll géré par Lenis */
html { scroll-behavior: smooth; }

.services-grid .service-card, .values-grid .value-item, .team-grid .team-card {
  opacity: 0; transform: translateY(22px);
  transition: opacity .9s cubic-bezier(.16,.7,.2,1), transform .9s cubic-bezier(.16,.7,.2,1);
}

.services-grid.visible .service-card, .values-grid.visible .value-item, .team-grid.visible .team-card { opacity: 1; transform: none; }

.services-grid.visible .service-card:nth-child(2){transition-delay:.12s}

.services-grid.visible .service-card:nth-child(3){transition-delay:.24s}

.values-grid.visible .value-item:nth-child(2){transition-delay:.10s}

.values-grid.visible .value-item:nth-child(3){transition-delay:.20s}

.values-grid.visible .value-item:nth-child(4){transition-delay:.30s}

.team-grid.visible .team-card:nth-child(2){transition-delay:.14s}

/* ===== Finition typo : Inter Tight (titres) + Carlito (texte) ===== */
.hero h1 { font-weight: 500; letter-spacing: -0.02em; }

.hero h1 em { font-weight: 500; }

.section-title { font-weight: 500; letter-spacing: -0.015em; line-height: 1.12; }

.hero-label, .section-label { font-weight: 500; letter-spacing: 0.22em; }

.hero-sub { font-weight: 400; letter-spacing: 0; }

.section-desc { font-weight: 400; }

.btn-primary, .btn-ghost { font-weight: 500; letter-spacing: 0.14em; }

.nav-links > a, .nav-cta, .nav-login { font-weight: 500; letter-spacing: 0.05em; }

.stat-number { font-family: var(--body); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.stat-label { font-weight: 500; letter-spacing: 0.14em; }

.service-num, .feature-num, .team-role, .trust-label { font-weight: 500; letter-spacing: 0.12em; }

.intro-quote { font-weight: 400; }

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Corps de texte : lisibilité + (audience premium/senior) */
.section-desc { font-size: 1.06rem; line-height: 1.7; }

.service-card p, .value-item p, .team-bio, .feature-card p, .body-sm, .intro-quote { font-size: 1rem; line-height: 1.72; }

.hero-sub { font-size: 1.1rem; line-height: 1.75; }

/* Réduire le vide noir entre le hero et la 1re section */
.hero::after { height: 70px; }

section[aria-labelledby="who-we-are"] { padding-top: 3.5rem; }

.divider { padding-top: 0; padding-bottom: 0; }

/* Titres en romain : aucune italique calligraphique */
.hero h1 em { font-style: normal; }

.intro-quote { font-style: normal; }

/* Losange du divider en CSS pur (plus de flash de chargement de police) */
.divider-icon { width: 9px; height: 9px; padding: 0; font-size: 0 !important; line-height: 0; background: var(--accent-pale); transform: rotate(45deg); flex: none; border-radius: 1px; }

.hero-sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 0 2rem;
}

.hero-media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; background: var(--bg);
  filter: saturate(0.96) brightness(0.92);
}

.hero-poster { z-index: 0; transition: opacity .5s ease; }

.hero-canvas { z-index: 1; }

.hero-video  { z-index: 1; display: none; }

.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(10,15,26,0.72) 0%, rgba(10,15,26,0.42) 28%, rgba(10,15,26,0.32) 52%,
    rgba(10,15,26,0.55) 80%, var(--bg) 100%);
}

.hero-content { transition: opacity .3s ease; will-change: opacity, transform; }

/* On neutralise l'ancien fond image + fondu du hero statique (remplacés par la vidéo + scrim) */
.hero-home::before, .hero-home::after { display: none !important; }

.lang-switch { display: flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; font-weight: 400; letter-spacing: 0.1em; }

/* ── Points de rupture propres à l'accueil ── */

@media (max-width: 1024px) {
  section { padding: 6rem 2rem; }
  nav#nav { padding: 1.2rem 2rem; }
  nav#nav.scrolled { padding: 0.8rem 2rem; }
  .page-hero { padding: 0 2rem 5rem; min-height: 48vh; }
  .intro { grid-template-columns: 1fr; gap: 3rem; }
  .services-grid { grid-template-columns: 1fr; }
  .services-grid-2 { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .values-grid-2 { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .team-grid { grid-template-columns: 1fr; }
  .offices-row { grid-template-columns: 1fr; }
  .capabilities-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 4rem; }
  .service-block { grid-template-columns: 1fr; gap: 3rem; }
  .service-block.reverse { grid-template-columns: 1fr; }
  footer { flex-direction: column; gap: 2rem; text-align: center; }
  .footer-links { justify-content: center; }
  .cta-section { padding: 7rem 2rem; }
  .cta-simple { padding: 6rem 2rem; }
  .divider { padding: 0 2rem; }
}

@media (max-width: 600px) {
  section { padding: 5rem 1.5rem; }
  nav#nav { padding: 1rem 1.5rem; }
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .values-grid { grid-template-columns: 1fr; }
  .values-grid-2 { grid-template-columns: 1fr; }
  .team-card { flex-direction: column; gap: 1.5rem; }
  .hero-cta { flex-direction: column; }
  .capabilities-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .page-hero { padding: 0 1.5rem 4rem; }
  .page-hero h1 { font-size: clamp(2.2rem, 8vw, 3.5rem); }
  .team-grid { grid-template-columns: 1fr; }
  .cta-section { padding: 5rem 1.5rem; }
  .cta-simple { padding: 5rem 1.5rem; }
  .quote-block { padding: 4rem 1.5rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .reveal { transform: translateY(26px); transition: opacity 1s cubic-bezier(.16,.7,.2,1), transform 1s cubic-bezier(.16,.7,.2,1); }
  /* Ken Burns retiré : le scale déplaçait le fondu bas (transparent→noir) sur 24s,
     donnant l'impression d'un calque foncé qui se met en place progressivement
     ("l'espace se rapetisse"). Fond hero désormais stable + présent immédiatement. */
}

@media (prefers-reduced-motion: reduce){
  .services-grid .service-card,.values-grid .value-item,.team-grid .team-card{opacity:1;transform:none;transition:none}
}

@media (max-width: 900px) { }

@media (prefers-reduced-motion: reduce) { }

@media (max-width: 1024px) {
  footer {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  footer .footer-logo-link,
  footer .footer-links,
  footer .footer-copy {
    justify-self: center;
    text-align: center;
  }
}

/* ─── Le hero d'accueil va d'un bord à l'autre ────────────────────────────
 *
 * `section { padding: 8rem 4rem }` s'applique à toutes les sections, celle du
 * hero comprise. Le canvas vit dans `.hero-sticky`, un enfant : il était donc
 * contraint par ce padding et s'arrêtait à 70 px des bords, ce qui encadrait
 * l'image d'un liseré noir — l'effet « vidéo avec des marges » au lieu d'une
 * image plein cadre. Les autres pages n'ont pas ce défaut : leur image est
 * peinte en `::before` avec `inset: 0`, qui couvre la boîte de padding.
 */
/* Le padding vertical portait la course de défilement : le supprimer sans le
   remplacer ramenait la hauteur du conteneur à celle de la fenêtre, donc
   `offsetHeight - innerHeight = 0`, et l'animation restait figée sur la
   première image. On le remplace par une hauteur explicite — 140vh, soit la
   même course de 40vh qu'avant — et l'image touche enfin les quatre bords. */
.hero-scrolly {
  padding: 0;
  min-height: 140vh;
}

/* L'image couvre toute la zone (les médias sont en `inset: 0`, donc collés à
   la boîte de padding) ; seul le contenu est repoussé sous la navigation. */
.hero-sticky {
  padding-left: 0;
  padding-right: 0;
  padding-top: 3rem;
}

/* Le contenu, lui, garde ses marges pour ne pas toucher les bords. */
.hero-sticky .hero-content { padding: 0 2rem; }