/* ABC Canada 2027 — chrome des pages intérieures.
   Ce que toute page qui n'est pas l'accueil réutilise : le bandeau encre qui
   remplace le hero photo, le fil d'Ariane, la bande de repères et la FAQ.
   Extrait de stay.css le jour où la page Partenaires en a eu besoin à son
   tour. Charge après site.css et avant les feuilles de module : tout ici
   s'appuie sur les tokens de Modernist et sur les primitives de site.css
   (.wrap, .section, .eyebrow, .btn) sans les redéfinir. */

/* ── En-tête de page ──────────────────────────────────────────────────────
   Le bandeau encre porte le titre, la signature de la page et ses entrées
   principales. Deux états : à plat, et avec une photographie au fond quand
   la page en pose une (.page-hero-media). Le bandeau garde son encre en fond
   dans les deux cas — c'est elle qui tient le contraste si l'image tarde,
   échoue ou n'est pas chargée. */
.page-hero {
  position: relative; isolation: isolate;
  background: var(--color-text); color: var(--color-bg);
  padding: clamp(28px, 4vw, 44px) var(--pad-x) var(--section-y-tight);
}
.page-hero-inner { position: relative; z-index: 1; max-width: var(--wrap); margin: 0 auto; }

/* La photographie est un fond, pas une image à lire : elle passe sous un
   voile en deux axes, repris du hero de l'accueil. La colonne assombrit la
   gauche, là où le titre et le texte se posent, et relâche la droite où sont
   les visages ; la base ne pèse que sur la bande basse, celle des repères. */
.page-hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.page-hero-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%;
}
.page-hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to right,
      rgba(32, 30, 29, .94) 0%,
      rgba(32, 30, 29, .88) 42%,
      rgba(32, 30, 29, .64) 74%,
      rgba(32, 30, 29, .50) 100%),
    linear-gradient(to top,
      rgba(32, 30, 29, .70) 0%,
      rgba(32, 30, 29, .34) 55%,
      rgba(32, 30, 29, .24) 100%);
}
.page-hero .eyebrow { color: var(--color-accent-400); }
/* Même traitement que les titres de section : léger par défaut, la moitié
   emphatique en 800. */
.page-hero h1 {
  margin: 0 0 20px; max-width: 15ch; font-weight: 400;
  font-size: clamp(38px, 6.4vw, 92px); line-height: .94; letter-spacing: -.03em;
}
.page-hero h1 strong { font-weight: var(--font-heading-weight); }
.page-hero-lede {
  margin: 0; max-width: 46ch;
  font-size: clamp(17px, 1.6vw, 21px); color: var(--ground-70);
}
.page-hero-lede strong { color: var(--color-bg); font-weight: var(--font-heading-weight); }
.page-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.page-hero-actions .btn { height: 56px; padding: 0 28px; font-size: 15px; letter-spacing: .04em; }

/* ── Fil d'Ariane ─────────────────────────────────────────────────────── */
.breadcrumb { margin: 0 0 clamp(24px, 4vw, 44px); font-size: 12px; letter-spacing: .1em; }
.breadcrumb ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0; padding: 0; list-style: none;
}
.breadcrumb a { color: rgba(243, 242, 242, .7); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-accent-400); }
.breadcrumb [aria-current="page"] { color: var(--color-bg); }
.breadcrumb li + li::before { content: "/"; margin-right: 10px; color: rgba(243, 242, 242, .35); }

/* Variante claire, pour les deux pages de formulaire. */
.breadcrumb--ink a { color: var(--ink-muted); }
.breadcrumb--ink a:hover { color: var(--accent-text); }
.breadcrumb--ink [aria-current="page"] { color: var(--color-text); }
.breadcrumb--ink li + li::before { color: rgba(32, 30, 29, .4); }

/* ── Bandeau de repères ───────────────────────────────────────────────── */
.page-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  margin-top: clamp(40px, 5vw, 64px); border-top: var(--rule-inverse);
}
.page-fact { padding: 26px 28px; border-right: var(--rule-inverse); }
.page-fact:first-child { padding-left: 0; }
.page-fact:last-child { padding-right: 0; border-right: 0; }
.page-fact-label {
  margin: 0 0 6px; font-size: 11px; letter-spacing: .14em;
  font-weight: 600; color: var(--ground-55);
}
.page-fact-value { margin: 0; font-size: 19px; font-weight: var(--font-heading-weight); letter-spacing: -.01em; }


/* ── FAQ (§53) ────────────────────────────────────────────────────────── */
.faq { max-width: 860px; margin-top: 8px; border-top: var(--rule); }
.faq-item { border-bottom: var(--hair); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 0; cursor: pointer; list-style: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; letter-spacing: -.01em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--accent-text); }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { margin: 0 0 20px; max-width: 68ch; font-size: 14px; color: var(--ink-60); }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  /* Le texte occupe toute la largeur : la colonne du voile n'a plus de côté
     à relâcher, elle laisse la place à une densité égale sur toute l'image,
     et le cadrage se recentre sur les visages. */
  .page-hero-media img { object-position: 64% 50%; }
  .page-hero-media::after {
    background: linear-gradient(to top,
      rgba(32, 30, 29, .92) 0%,
      rgba(32, 30, 29, .86) 55%,
      rgba(32, 30, 29, .78) 100%);
  }
  .page-fact { padding: 20px 0; border-right: 0; border-bottom: var(--rule-inverse); }
  .page-fact:last-child { border-bottom: 0; }
  .page-hero-actions .btn { width: 100%; justify-content: flex-start; }
}