/* ==========================================================================
   Pacific Agency — blocs propres aux pages
   ========================================================================== */

/* Ancres ------------------------------------------------------------------- */

/* L'en-tête est sticky à --header-h : tout élément visé par une ancre interne
   (ex. services.html#personnel, flotte.html#higer-65) doit se décaler pour ne
   pas passer sous l'en-tête. */
[id] { scroll-margin-top: calc(var(--header-h) + var(--space-4)); }

/* Hero -------------------------------------------------------------------- */

/* Voile du hero : opacité fixée par le calcul (voir .page-hero plus bas),
   pas par l'oeil. La photo est affichée à 26 % d'opacité sur le fond
   --pa-green-dark, donc un voile vert effectif de 74 % — même valeur et
   même garantie que les bannières des pages intérieures. L'ancienne valeur
   (opacité .38, voile effectif 62 %) était sous le plancher de 70 % : le
   titre ne restait lisible que parce que cette photo précise est sombre
   là où le texte est posé, pas par construction. */
.hero { position: relative; background: var(--pa-green-dark); color: #fff; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .26; }
.hero__inner {
  position: relative;
  padding-block: var(--space-16);
  max-width: 44rem;
}
@media (min-width: 900px) { .hero__inner { padding-block: var(--space-24); } }

.hero h1 { color: #fff; }
.hero__lede { font-size: var(--fs-lg); color: rgba(255,255,255,.9); margin-bottom: var(--space-8); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.hero .eyebrow { color: #fff; opacity: .85; }

/* Entree du hero au chargement -- animation CSS pure, sans JavaScript.
   Chaque element garde sa valeur d'opacite de repos (1 pour le h1/le
   chapo/les boutons, .85 pour le surtitre juste au-dessus) : le mot-cle
   "to" ne fixe QUE le transform, si bien que l'opacite de fin d'animation
   se resout sur la valeur de base de chaque element (comportement standard
   des animations CSS quand une propriete est absente d'un palier). Un
   navigateur sans support de `animation` ignore simplement la propriete :
   les quatre elements restent a leur style de repos, donc visibles -- rien
   n'est jamais masque par une classe ou un etat qui dependrait du JS. Le
   media prefers-reduced-motion global (base.css) ramene deja
   animation-duration a .01ms, donc ce visiteur voit le hero s'installer
   quasi instantanement plutot que jamais. */
@keyframes hero-enter {
  from { opacity: 0; transform: translateY(16px); }
  to   { transform: none; }
}
.hero .eyebrow,
.hero h1,
.hero__lede,
.hero__actions {
  animation: hero-enter var(--motion-enter) var(--ease-out) both;
}
.hero h1        { animation-delay: 80ms; }
.hero__lede     { animation-delay: 160ms; }
.hero__actions  { animation-delay: 240ms; }

/* Bannière image des pages intérieures -------------------------------------
   Même principe que le hero de l'accueil : photo pleine largeur, voile
   --pa-green-dark à 74 % d'opacité, contenu centré par-dessus.

   Opacité du voile fixée par calcul, pire cas = un pixel blanc pur de la
   photo sous le voile (script de contrôle du projet) :
     --pa-green-dark à 70 % ...... 4,51:1  (plancher, ne jamais descendre en-dessous)
     --pa-green-dark à 74 % ...... 5,01:1  (valeur retenue)
     --pa-green      à 85 % ...... 5,07:1  (plus opaque, laisse voir moins de photo)
   Le vert foncé, à opacité moindre, laisse donc voir davantage de la
   photographie que le vert clair pour une garantie de lisibilité équivalente.
   Le titre et le chapô sont en blanc plein (pas de rgba) : à cette opacité de
   voile, un blanc translucide comme .hero__lede (90 %) retombe à 4,42:1 dans
   le pire cas, sous le seuil AA — blanc plein reste la seule valeur qui
   respecte la garantie « passe partout ». */
.page-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
}
.page-hero__media { position: absolute; inset: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__veil { position: absolute; inset: 0; background: var(--pa-green-dark); opacity: .74; }
.page-hero__inner {
  position: relative;
  padding-block: var(--space-16);
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
}
@media (min-width: 900px) { .page-hero__inner { padding-block: var(--space-24); } }
.page-hero h1 { color: #fff; margin-bottom: var(--space-4); }
.page-hero .lede { color: #fff; margin-inline: auto; }

/* Fil d'Ariane, posé sur le voile du .page-hero. Séparateur "›" en <li>
   distinct, aria-hidden : ignoré des lecteurs d'écran, qui n'énoncent que
   les deux destinations. Texte plein blanc (pas de rgba) pour la même
   raison que le h1 et le chapô ci-dessus. */
.breadcrumb { margin-bottom: var(--space-4); }
.breadcrumb ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; justify-content: center; flex-wrap: wrap; align-items: center;
  gap: var(--space-2);
  font-family: var(--font-title); font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}
.breadcrumb a {
  color: #fff; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.5);
}
.breadcrumb a:hover { text-decoration-color: #fff; }
.breadcrumb li[aria-current] { color: #fff; opacity: .85; }
.breadcrumb li[aria-hidden] { opacity: .5; }

/* Chiffres clés ------------------------------------------------------------
   Fond blanc, comme le reste de la page — refus client de la bande verte
   après rendu réel. Plus de bande colorée ni de séparateurs verticaux : deux
   filets fins délimitent la section en haut et en bas, l'espacement seul
   sépare les colonnes entre elles.
   Ratios mesurés (script de contrôle du projet) : --pa-green (#156528) sur
   blanc = 7,18 (chiffres) ; --pa-muted (#5A6468) sur blanc = 6,07 (libellés,
   ≥ 4,5 requis). */

/* Rythme vertical aligné sur .section (base.css : space-16, puis space-24
   à partir de 900px) plutôt qu'une valeur propre à ce bloc : les chiffres
   avaient trop peu d'air au-dessus et en-dessous. */
.stats {
  background: var(--pa-bg);
  border-block: 1px solid var(--pa-line);
}
.stats__grid {
  display: grid; gap: var(--space-8);
  grid-template-columns: repeat(2, 1fr);
  padding-block: var(--space-16);
  text-align: center;
}
@media (min-width: 900px) { .stats__grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .stats__grid { padding-block: var(--space-24); } }

.stat {
  position: relative;
  transition: opacity var(--motion-enter) var(--ease-out), transform var(--motion-enter) var(--ease-out);
}

.stat__value {
  display: block;
  font-family: var(--font-title); font-weight: 800;
  font-size: var(--fs-3xl); line-height: 1; color: var(--pa-green);
}
.stat__label {
  font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--pa-muted);
  margin-top: var(--space-3);
}

/* Apparition échelonnée au défilement, même mécanique que les cartes de
   services (voir components.css et assets/js/main.js) : visible par défaut
   en CSS, .js-reveal n'est ajoutée que par le script. */
.stat.js-reveal { opacity: 0; transform: translateY(20px); }
@media (prefers-reduced-motion: reduce) {
  .stat.js-reveal { opacity: 1; transform: none; }
}

/* Bloc texte + image ------------------------------------------------------- */

.split { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
  .split--reverse .split__media { order: 2; }
}
.split__media img { border-radius: var(--radius-lg); width: 100%; }
.split + .split { margin-top: var(--space-16); }

.checklist { list-style: none; padding: 0; }
.checklist li {
  position: relative; padding-left: var(--space-8); margin-bottom: var(--space-3);
}
.checklist li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--pa-orange-light); color: var(--pa-orange-dark);
  font-size: var(--fs-xs); font-weight: 700;
  display: grid; place-items: center;
}

/* Bandeau d'appel à l'action ---------------------------------------------- */

.cta-band {
  background: var(--pa-green); color: #fff;
  padding-block: var(--space-16); text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.88); max-width: 52ch; margin-inline: auto; }
.cta-band .eyebrow { color: #fff; }
.cta-band__actions {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  justify-content: center; margin-top: var(--space-8);
}

/* Partenaires -------------------------------------------------------------- */
/* .partners n'a pas de règle propre : c'est un hook structurel, le rendu
   visuel est porté par .partners__grid et ses enfants. */

.partners__grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { .partners__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .partners__grid { grid-template-columns: repeat(5, 1fr); } }

.partner {
  display: grid; place-items: center; text-align: center;
  min-height: 88px; padding: var(--space-4);
  background: var(--pa-bg); border: 1px solid var(--pa-line); border-radius: var(--radius);
  font-family: var(--font-title); font-weight: 700; font-size: var(--fs-sm);
  color: var(--pa-muted);
}

/* Carte de contact — remplace la carte Google Maps tant qu'on ne l'a pas
   demandée : la carte réelle télécharge plusieurs centaines de Ko de scripts
   tiers, à elle seule responsable de l'essentiel du poids de la page. */
.map-facade {
  height: 320px; padding: var(--space-6);
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-4);
  background: var(--pa-green-light); border: 1px solid var(--pa-line); border-radius: var(--radius);
  text-align: center;
}
.map-facade__pin { width: 28px; height: 28px; fill: var(--pa-green); margin-inline: auto; }
.map-facade__address { color: var(--pa-ink); }
.map-facade__cta { margin-inline: auto; }