/* Pages Réalisations : gabarit typographique commun (25/09/2026).
   Référence : Branding stratégique (texte courant 14 px, interligne 1,62, 20 px entre paragraphes,
   étiquettes en IBM Plex Mono 12 px). Chargée en dernier dans chaque page pour l'emporter sur les
   styles internes ; ne touche ni aux couleurs ni à la mise en page. */

:root { --rs-body: clamp(14px, 1vw, 16px); }

/* Étiquettes du cadre SENTEKIA */
.section-tag, .step-banner-tag, .meta-label {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.16em !important;
}
.hero-meta-center, .details-table td:first-child, .mosaic-card-info p {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-size: 12px !important;
}

/* Texte courant */
.about-desc, .step-banner-desc, .narrative-p, .bento-card-desc, .still-caption {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: var(--rs-body) !important;
  line-height: 1.62 !important;
}
.about-desc, .step-banner-desc, .narrative-p { margin-bottom: 20px; }
.about-desc strong, .step-banner-desc strong, .narrative-p strong { font-weight: 700; }

/* Paragraphes importants : l'italique Fraunces du site */
.about-lead-text, .narrative-lead, .rs-accent {
  font-family: 'Fraunces', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(22px, 2.6vw, 38px) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
}
.bento-lead {
  font-family: 'Fraunces', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(18px, 1.8vw, 24px) !important;
  line-height: 1.35 !important;
}
.rs-accent { font-size: clamp(18px, 1.7vw, 24px) !important; line-height: 1.4 !important; }

/* Titres de blocs */
.about-heading, .step-banner-title, .overview-headline, .narrative-heading {
  font-size: clamp(34px, 8vw, 64px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.04em !important;
  font-weight: 800 !important;
}

/* Sous l'en-tête fixe du site (74 px), comme Branding stratégique */
.hero-headline-bar { padding-top: clamp(84px, 11vw, 104px) !important; }

/* Bouton « Découvrir » de la carte projet suivant : couleur du site, angles droits (aucun arrondi sur le site) */
.next-hero-cta-btn {
  background: #b1230a !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
}
.next-hero-showcase:hover .next-hero-cta-btn {
  background: #ce2b37 !important;
  box-shadow: none !important;
}

/* Blocs du système : cadre, bordure couleur de la marque et ombre au survol, entrée une seule fois au scroll */
.bento-cell {
  border: 1px solid rgba(9, 9, 9, 0.1);
  box-shadow: 0 1px 0 rgba(9, 9, 9, 0.04);
  transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.bento-cell:hover, .bento-cell:focus-within, .bento-cell:active {
  border-color: var(--accent-orange, #FB5821);
  box-shadow: 0 18px 36px -18px color-mix(in srgb, var(--accent-orange, #FB5821) 50%, transparent);
  transform: translateY(-4px);
}
.bento-cell.rs-reveal:not(.is-in) { opacity: 0; }
.bento-cell.rs-reveal.is-in { animation: rs-cell-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) backwards; animation-delay: var(--rs-delay, 0ms); }
@keyframes rs-cell-in {
  from { opacity: 0; transform: translateY(24px); border-color: var(--accent-orange, #FB5821); box-shadow: 0 18px 36px -18px color-mix(in srgb, var(--accent-orange, #FB5821) 50%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .bento-cell.rs-reveal:not(.is-in) { opacity: 1; }
  .bento-cell.rs-reveal.is-in { animation: none; }
  .bento-cell:hover { transform: none; }
}

/* Supports Koniq : cadre orange fin (effet au scroll et au survol) et en-tête qui passe à la ligne sur mobile */
.still-card.is-inview, .still-card:hover, .still-card.active-touch { padding: 0.4rem !important; }
.stills-section > div:first-child { flex-wrap: wrap !important; gap: 0.75rem 1.5rem; }
.still-card .still-number-badge { font-size: 0.7rem !important; white-space: nowrap; }