/* OSDIGITALIS · pages d'expertise (Développement, DevOps, Formations)
   S'appuie sur styles.css (jetons, héros de page, listes à filets, chaîne, tuiles, bande contact).
   Ajoute : facettes (titre à gauche, contenu à droite), preuves de la page Développement,
   chaîne grand format de la page DevOps, public de Formations, navigation entre expertises.
   Sommaire : 1 gabarit · 2 facettes · 3 preuves · 4 chaîne grand format · 5 formations · 6 navigation · 7 adaptations. */

/* ===== 1. Gabarit ===== */
.section--tight { --section-y: var(--section-y-tight, 88px); }
/* « Pour qui » vit dans le héros, en métadonnée : une phrase, pas une valeur en mono. */
.page-hero .page-meta dd.is-text { max-width: 58ch; font-size: 16px; line-height: 1.6; }
/* Lien vers une page du site : la flèche « → » avance à l'horizontale (la diagonale est réservée aux liens externes). */
.text-link--go:hover > span[aria-hidden="true"] { transform: translateX(3px); }

/* ===== 2. Facettes : une étiquette à gauche, l'essentiel en grand à droite ===== */
.facet { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 20px; align-items: start; }
.facet-title { grid-column: 1 / span 4; padding-top: 10px; color: var(--muted); font-family: var(--body); font-size: 13px; font-weight: 400; letter-spacing: 0; line-height: 1.4; }
.facet-body { grid-column: 7 / -1; }
.facet-statement { font-family: var(--display); font-size: clamp(23px, 2.3vw, 33px); font-weight: 500; letter-spacing: -.04em; line-height: 1.28; }
.facet-statement + .facet-statement { margin-top: 20px; color: var(--muted); }
.facet-body .tech-list { gap: 14px 40px; font-size: clamp(16px, 1.45vw, 20px); line-height: 1.3; }
.facet-body .tech-list li { gap: 14px; }
.facet-body .tech-list li::before { flex-basis: 6px; width: 6px; height: 6px; }
.facet-body .tl { width: 22px; height: 22px; }
.rule-list + .facet { margin-top: clamp(48px, 6vw, 88px); }
.facet--stack .facet-title, .facet--stack .facet-body { grid-column: 1 / -1; }
.facet--stack .facet-title { padding-top: 0; }
.facet--stack .facet-body { margin-top: clamp(16px, 2vw, 28px); }

/* ===== 3. Preuves (page Développement) ===== */
.proof { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 36px; align-items: start; }
.proof + .proof { margin-top: clamp(56px, 7vw, 104px); padding-top: clamp(56px, 7vw, 104px); border-top: 1px solid var(--line); }
.proof-copy { grid-column: 1 / span 4; }
.proof-media { grid-column: 5 / -1; }
.proof-media .frame { margin: 0; }
.proof-title { font-size: clamp(32px, 4vw, 60px); font-weight: 700; letter-spacing: -.045em; line-height: 1.04; }
.proof-tagline { margin-top: 18px; font-family: var(--display); font-size: clamp(21px, 2vw, 28px); font-weight: 500; letter-spacing: -.035em; line-height: 1.3; }
.proof-text { max-width: 46ch; margin-top: 16px; color: var(--muted); font-size: 16px; line-height: 1.7; }
.proof-points { margin-top: 28px; counter-reset: point; }
.proof-points li { display: flex; align-items: baseline; gap: 14px; padding-block: 12px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; counter-increment: point; }
.proof-points li::before { content: counter(point); flex: 0 0 1.2em; color: var(--muted); font-family: var(--mono); font-size: 12px; }
.proof-points--row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col-gap); margin-top: 24px; }
.proof-points--row li { display: block; padding-top: 14px; }
.proof-points--row li::before { display: block; margin-bottom: 8px; }
.proof .showcase-links { margin-top: 12px; }
.proof-copy > .showcase-links { margin-top: 28px; }
.proof--phone { align-items: center; }
.proof--phone .proof-copy { grid-column: 8 / -1; grid-row: 1; }
.proof--phone .proof-media { grid-column: 1 / span 6; grid-row: 1; display: flex; justify-content: center; }
.proof--phone .phone { --phone-w: min(280px, 72vw); }

/* ===== 4. Chaîne grand format (page DevOps) ===== */
.chain { padding-block: var(--section-y); }
.chain .section-head { margin-bottom: clamp(56px, 7vw, 104px); }
.pipeline--xl .pipeline-steps { counter-reset: stage; }
.pipeline--xl .pipeline-step { counter-increment: stage; }
.pipeline--xl .pipeline-title { font-size: clamp(19px, 2.1vw, 30px); letter-spacing: -.04em; line-height: 1.15; }
.pipeline--xl .pipeline-title::before { content: counter(stage, decimal-leading-zero); display: block; margin-bottom: 14px; color: var(--muted); font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: 0; line-height: 1.4; }
.pipeline--xl .pipeline-tool { margin-top: 14px; font-size: clamp(14px, 1.2vw, 17px); line-height: 1.5; }
.pipeline--xl .pipeline-tool + .pipeline-tool { margin-top: 2px; }
.pipeline--xl .pipeline-caption { max-width: none; margin-top: clamp(40px, 5vw, 72px); padding: clamp(24px, 3vw, 36px) 25% 0 0; border-top: 1px solid var(--line); color: var(--text); font-family: var(--display); font-size: clamp(22px, 2.6vw, 38px); font-weight: 500; letter-spacing: -.04em; line-height: 1.25; }
@media (min-width: 901px) {
  /* Le numéro de l'étape devient un grand chiffre en mono, éteint tant que l'étape n'est pas franchie. */
  .pipeline--xl .pipeline-title::before { margin-bottom: 18px; color: var(--text); font-size: clamp(30px, 3.1vw, 44px); font-weight: 500; letter-spacing: -.045em; line-height: 1; }
  /* Hauteur réservée : le grand chiffre (taille, marge) plus deux lignes de titre (2 × 1,15 em), pour que les outils restent alignés quand « Déploiement en test » passe sur deux lignes. */
  .pipeline--xl .pipeline-title { min-height: calc(2.3em + clamp(30px, 3.1vw, 44px) + 18px); }
}
@media (prefers-reduced-motion: no-preference) {
  .pipeline--xl .pipeline-title::before { transition: color 400ms var(--ease); }
  .js .pipeline--xl .pipeline-step:not(.is-passed) .pipeline-title::before { color: var(--off); }
  @media (min-width: 901px) {
    .js .pipeline--xl .pipeline-step:not(.is-passed) .pipeline-title::before { color: var(--ghost); }
  }
}

/* ===== 5. Formations ===== */
.audiences .col-item { padding-top: 28px; }
.audiences .col-item p { max-width: 38ch; }

/* ===== 6. Navigation entre expertises ===== */
.expertise-pager { padding-block: var(--section-y-tight, 88px); }
/* Après le bloc « centres de formation » (classe .centers--flush) : son espacement bas est supprimé et le filet haut de la navigation recouvre son filet bas, pour un seul trait. */
.centers--flush { padding-bottom: 0; }
.expertise-pager--flush { margin-top: -1px; padding-top: 0; }
.expertise-pager .pager-label { display: inline-flex; align-items: center; gap: 10px; }
.expertise-pager a.pager-link--prev:hover .pager-title span[aria-hidden="true"] { transform: translateX(3px); }

/* ===== 7. Adaptations ===== */
@media (max-width: 600px) {
  .proof-points--row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 6px; }
}
@media (max-width: 900px) {
  .facet-title, .facet-body { grid-column: 1 / -1; }
  .facet-title { padding-top: 0; }
  /* Mobile : titre et texte, puis la capture, puis les étapes et les liens (même ordre que l'accueil). */
  .proof, .proof--phone { display: flex; flex-direction: column; align-items: stretch; row-gap: 0; }
  .proof-copy { display: contents; }
  .proof-media, .proof--phone .proof-media { order: 1; justify-content: center; margin-block: 36px 0; }
  .proof-copy > .proof-points { order: 2; }
  .proof-copy > .showcase-links { order: 3; }
  .pipeline--xl .pipeline-title { font-size: 24px; }
  .pipeline--xl .pipeline-caption { padding-right: 0; }
}