/* ============================================
   COLLECTIF WEB — GABARIT PROJETS
   Extrait tel quel de maquettes/projets.html, maquette validée et gelée.
   L'habillage commun (en-tête, menu, pied) vit dans commun.css.
   ============================================ */

/* ====== Gabarit Projets — styles de page (tokens DS uniquement) ======
   Fondations reprises du gabarit expertises (header, menu mobile, bascule,
   révélations). Les patterns partagés remonteront au DS à la réutilisation. */

/* Sections de page */
.band { margin-bottom: clamp(88px, 11vw, 136px); }

/* ====== Grille — composant .project-card du DS, validé sur l'accueil ====== */
.projets-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }

/* Couverture avec vraie photo (pattern accueil) */
.project-card__cover--photo { background: var(--paper); }
.project-card__cover--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.project-card__cover--photo::after { display: none; }

/* Lien vers la fiche (étude de cas) et mention d'attente honnête */
.project-card__action { margin-top: 2px; }
.project-card__action a {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  color: var(--paper);
  text-decoration: none;
  display: inline-block;
  padding: 5px 0;
}
.project-card__action a:hover,
.project-card__action a:focus-visible { color: var(--vert-bright); }
.project-card__action .attente { font-size: 16px; color: rgba(237, 241, 239, .58); }

/* ====== Appel final — boutons côte à côte (pattern expertises) ====== */
.cta-block { grid-template-columns: 1fr auto; align-items: center; }
.cta-block .actions { flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
.cta-block .actions .btn { color: var(--paper); border-color: var(--paper); }
.cta-block .actions .btn--dark { background: var(--ink); border-color: var(--ink); }

/* ====== Motion (D-058) ====== */

/* Révélation au défilement — visible par défaut, le JS ajoute la retenue */
html.js .reveal { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
html.js .reveal.in { opacity: 1; transform: none; }

/* Cascade des tuiles à l'arrivée de la grille */
.projets-grid .project-card:nth-child(2) { transition-delay: .07s; }
.projets-grid .project-card:nth-child(3) { transition-delay: .14s; }
.projets-grid .project-card:nth-child(5) { transition-delay: .07s; }
.projets-grid .project-card:nth-child(6) { transition-delay: .14s; }

/* Entrée orchestrée du hero (titre → sous-titre) */
html.js .hero__inner > * { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
html.js .hero__inner > :nth-child(2) { transition-delay: .12s; }
html.js .hero--go .hero__inner > * { opacity: 1; transform: none; }
.hero { position: relative; overflow: hidden; }
.hero__inner { position: relative; z-index: 1; }

/* Fond hero — la constellation des 750 (D-070). Sans JavaScript : fond uni. */
.hero__fond { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__fond canvas { width: 100%; height: 100%; display: block; }

/* Raturage du hero : la teinte DS du texte barré manque de contraste sur l'encre */
.hero .strike { color: rgba(237, 241, 239, .66); }

/* Responsive */
@media (max-width: 1000px) {
  .projets-grid { grid-template-columns: repeat(2, 1fr); }
  .cta-block { grid-template-columns: 1fr; }
  .site-footer .top { grid-template-columns: 1fr 1fr; }
  .site-footer .brand-col { grid-column: 1 / -1; }
  .site-footer .blocs { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .projets-grid { grid-template-columns: 1fr; }
  .hero__title { font-size: clamp(32px, 9.6vw, 44px); }
  .site-header { padding: var(--space-2) var(--space-3); gap: var(--space-2) var(--space-3); margin-bottom: var(--space-5); }
  .site-header .logo-img { height: 20px; }
  .site-header__actions .btn { display: none; }
  /* Rembourrage réduit de la dalle : les boutons pleine largeur respirent */
  .cta-block { padding: var(--space-6) var(--space-5); }
  .cta-block .actions .btn { width: 100%; justify-content: center; }
}