/* ============================================================
   manifeste.css — la page /manifeste, et elle seule.
   Figma : x6JfnfuKdqlbKtTHxh8m8k · node 5493-1344 « DesignBrain-Manifeste ».
   S'ajoute à main.css, qui porte tokens, reset, en-tête et pied de page.
   ============================================================ */

/* ── Hero ─────────────────────────────────────────────────── */
.credo-hero{
  padding-block:120px 96px;
  text-align:center;
  position:relative;
}
.credo-hero__inner{
  max-width:var(--container-max, 1200px);
  margin-inline:auto;
  padding-inline:var(--space-gutter, 120px);
}
.credo-hero__eyebrow{margin:0 0 var(--space-8, 32px)}
.credo-hero__title{
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--text-hero, 72px);
  line-height:1.05;
  letter-spacing:-0.02em;
  font-weight:600;   /* retour du 26/08 : la graisse bold pesait trop */
  color:var(--color-title);
}
/* Le geste signature : un seul fragment du titre porte le dégradé. */
.credo-hero__accent{
  background-image:var(--gradient-signature);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ── Corps : les signataires à gauche, le texte à droite ──── */
.credo{
  border-top:1px solid var(--color-border);
  padding-block:96px 120px;
}
.credo__inner{
  max-width:var(--container-max, 1200px);
  margin-inline:auto;
  padding-inline:var(--space-gutter, 120px);
  display:grid;
  grid-template-columns:minmax(180px, 240px) minmax(0, 1fr);
  gap:var(--space-12, 48px);
  align-items:start;
}

/* La colonne des signataires suit la lecture : c'est au nom de qui
   le texte est écrit, l'information doit rester à l'écran. */
.credo__signataires{
  position:sticky;
  top:120px;
  display:grid;
  gap:var(--space-8, 32px);
  margin:0;
}
.credo__signataire{display:grid;gap:10px;justify-items:start}
.credo__avatar{
  display:block;width:72px;height:72px;
  border-radius:var(--radius-full, 9999px);
  object-fit:cover;
}
.credo__nom{
  margin:0;
  font-size:var(--text-body-sm, 15px);line-height:20px;
  font-weight:600;color:var(--color-title);
}
.credo__role{
  margin:0;
  /* Retour du 26/08 : la coupe de la maquette — « Directeur Artistique /
     Senior / (+12 ans XP) » sur trois lignes, « Gardien de la mémoire /
     de marque » sur deux. C'est la largeur qui la produit. */
  max-width:135px;
  font-size:var(--text-caption, 13px);line-height:18px;
  color:var(--color-ink-soft);
}

/* ── Les articles de foi ──────────────────────────────────── */
.credo__blocs{display:grid;gap:72px;margin:0}
.credo__bloc{margin:0}
.credo__affirmation{
  margin:0 0 var(--space-6, 24px);
  font-family:var(--font-sans);
  font-size:var(--text-h4, 24px);
  line-height:34px;
  letter-spacing:-0.015em;
  font-weight:700;
  color:var(--color-title);
  max-width:22ch;
}
/* Deux affirmations dépassent la ligne : elles respirent sur toute la mesure. */
.credo__affirmation--longue{max-width:none}
.credo__texte{
  margin:0;
  font-size:var(--text-body-lg, 18px);
  line-height:32px;
  color:var(--color-ink);
}

/* ── Clôture : le renvoi vers la landing ──────────────────── */
.credo__fin{
  margin-top:96px;
  padding-top:var(--space-12, 48px);
  border-top:1px solid var(--color-border);
  display:flex;
  align-items:center;
  gap:var(--space-6, 24px);
  flex-wrap:wrap;
}
.credo__fin-texte{
  margin:0;flex:1 1 320px;
  font-size:var(--text-body, 16px);line-height:24px;
  color:var(--color-ink-soft);
}
.credo__retour{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 28px;
  border-radius:var(--radius-pill, 80px);
  background:var(--gradient-cta);
  color:var(--color-white);
  font-size:var(--text-small, 14px);line-height:24px;font-weight:600;
  text-decoration:none;
  box-shadow:var(--shadow-cta);
}
.credo__retour img{display:block;flex:none;width:auto;height:auto;
  transition:transform var(--motion-quick, 180ms) var(--ease-signature, cubic-bezier(.2,.6,.3,1))}
.credo__retour:hover img{transform:translateX(3px)}
.credo__retour:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px}

@media (max-width: 1024px){
  .credo-hero{padding-block:88px 72px}
  .credo-hero__title{font-size:clamp(38px, 6.2vw, 72px)}
  .credo-hero__inner,.credo__inner{padding-inline:clamp(20px, 8.33vw, 120px)}
  .credo__inner{grid-template-columns:1fr;gap:var(--space-12, 48px)}
  .credo__signataires{
    position:static;
    grid-auto-flow:column;grid-auto-columns:1fr;
    gap:var(--space-6, 24px);
  }
  .credo__blocs{gap:56px}
}
@media (max-width: 640px){
  .credo__signataires{grid-auto-flow:row}
  /* La coupe en trois lignes vient d'une mesure de 135px calée sur la
     colonne de la maquette. Une fois les signataires empilés sur toute
     la largeur, elle n'a plus de raison d'être : le rôle tenait en trois
     lignes serrées à côté de 190px de blanc. */
  .credo__role{max-width:none}
  .credo__affirmation{font-size:21px;line-height:30px;max-width:none}
  .credo__texte{font-size:16px;line-height:28px}
}
@media (prefers-reduced-motion: reduce){
  .credo__retour img{transition:none}
}

/* ── Rail hachuré : instances de cette page ──────────────────
   Le rail est intermittent et alterne les côtés (mémoire de marque,
   couche composition) : une apparition à gauche sur le hero, une à
   droite dans le corps — jamais les deux au même niveau. */
.side-decor--credo-haut{top:80px;height:520px}
.side-decor--credo-bas{top:1180px;height:791px}