/* Pages projet, alignées sur la home (Theo, 22/09). Chargée après le style de la page, elle remplace ses règles à spécificité égale.

   Les cartes « D'autres équipes qui avancent vite » : le résultat en pied de carte collé aux bords,
   la flèche dans la « pièce » de la home (25/09, Theo : « aligne le style arrow projet de la home des cards à celles dans la section des pages projet »), le titre en 28 px et le fond qui s'éclaire au survol.
   Même dessin que la home, transposé sur le fond clair de la section : filets et encre sombres, comme la variante claire des projets de la home.
   Avant le 25/09 : la flèche « Signal » seule (tracé fin de 28 px en masque), celle que la home portait jusqu'à la pièce ; l'historique git la garde. */

/* Le visuel garde sa hauteur, la carte prend le reste : les deux cartes d'une rangée démarrent et finissent à la même hauteur */
.autres .projet { grid-template-rows: auto 1fr; }
.autres .carte-projet { grid-template-rows: auto 1fr auto; gap: 16px; padding: 24px 32px 0; overflow: hidden; }
.autres .carte-projet > * { position: relative; }
/* Le survol : le fond passe en dégradé, en fondu, comme sur la home */
.autres .carte-projet::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2, #eceae2) 100%); opacity: 0; transition: opacity 0.35s ease; pointer-events: none; }
.autres .projet:hover .carte-projet::before { opacity: 1; }
/* La ligne client · secteur et le titre s'arrêtent avant la colonne de la pièce (36 px + 16 px d'air) : sans cette réserve sur le titre, une question longue filait sous la pièce
   sur une carte et pas sur l'autre (Theo, 25/09 : « les deux ne rendent pas pareil, celle de droite le texte va trop loin »). */
.autres .carte-projet :is(.meta, h3) { padding-right: 52px; }
.autres .carte-projet h3 { font-size: 28px; line-height: 1.25; align-self: start; }

/* Le résultat en pied de carte : collé aux bords sous un filet, fond à peine teinté, nombre en 44 px et phrase sur deux lignes égales */
.autres .carte-projet .resultat { display: flex; align-items: center; gap: 24px; margin: 8px -32px 0; padding: 24px 32px; border-top: 1px solid var(--trait); background: rgba(22,21,16,0.03); }
.autres .carte-projet .badge { flex: none; padding: 0; border-radius: 0; background: none; font-size: 44px; line-height: 0.9; letter-spacing: -0.02em; font-weight: 400; translate: 0 0.065em; }
.autres .carte-projet .resultat p { flex: 1; margin: 0; font-size: 16px; line-height: 1.35; color: var(--muted); text-wrap: balance; }

/* La flèche dans la pièce, comme sur la home (validée par Theo le 25/09), à l'échelle de ces cartes deux fois moins larges : un carré de 36 px à filet (48 sur la home, Theo : « trop gros mal placé », puis « plus petit un peu encore »),
   un seul angle arrondi en bas à droite, la flèche fine de 16 px au centre, centrée sur la ligne client · secteur et calée sur la marge droite du texte (32 px) au lieu du coin.
   Au survol de la rangée (ou en vue, au défilement, sous 1100 px) la pièce se remplit d'encre, la flèche passe en crème et l'angle arrondi change de coin ; elle ne bouge pas.
   Sur la home la pièce se remplit de crème sur la carte sombre ; ici, sur la carte claire, c'est l'inverse.
   Sélecteurs longs : la feuille de la page (transform au survol) et /motion.css (transition sur la flèche) posent des règles sur la même flèche. */
.autres .carte-projet .fleche { --m-taille: 16px; --m-fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='butt' stroke-linejoin='miter'%3E%3Cpath d='M3.5 12.5L12.5 3.5M5.5 3.5h7v7'/%3E%3C/svg%3E");
  position: absolute; top: 19px; right: 32px; width: 36px; height: 36px; font-size: 0; background: none; filter: none; opacity: 1; color: rgba(22,21,16,0.7);
  border: 1px solid rgba(22,21,16,0.28); border-radius: 4px 4px 12px 4px; }
.autres .carte-projet .fleche::before { content: ""; position: absolute; inset: 0; background: currentColor; -webkit-mask: var(--m-fleche) center / var(--m-taille) var(--m-taille) no-repeat; mask: var(--m-fleche) center / var(--m-taille) var(--m-taille) no-repeat; }
.autres .rangees .projet .carte-projet .fleche { transition: color 0.25s, background 0.25s, border-color 0.25s, border-radius 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.autres .rangees .projet:is(:hover, .en-vue) .carte-projet .fleche { transform: none; background: #161510; border-color: #161510; color: var(--on-dark); opacity: 1; border-radius: 12px 4px 4px 4px; }
.autres .rangees .projet.en-vue .carte-projet::before { opacity: 1; }
.autres .rangees .projet.en-vue .visuel img { transform: scale(1.03); }

/* Tablette et téléphone, comme sur la home (pied de carte validé le 25/09) : la pièce disparaît, une ligne « Voir le projet ↗ » ferme la carte sous le résultat, séparée par un filet,
   sans fond ; le texte et la flèche en encre atténuée, pleins quand la rangée est en vue (.en-vue, posé au défilement par /pages-projet.js), la flèche monte alors de 3 px ;
   la carte s'enfonce légèrement sous le doigt le temps de l'appui. */
.autres .lien-m { display: none; }
@media (max-width: 1100px) {
  .autres .carte-projet .fleche { display: none; }
  .autres .carte-projet :is(.meta, h3) { padding-right: 0; }
  .autres .lien-m { position: relative; display: flex; align-items: center; justify-content: space-between; margin: -16px -24px 0; padding: 0 24px; height: 52px; border-top: 1px solid var(--trait); pointer-events: none; }
  .autres .lien-m-texte { font-size: 15px; font-weight: 450; line-height: 1; white-space: nowrap; color: rgba(22,21,16,0.7); transition: color 0.3s; }
  .autres .lien-m-piece { position: relative; flex: none; width: 22px; height: 22px; color: rgba(22,21,16,0.7); transition: translate 0.45s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s; }
  .autres .lien-m-piece::before { content: ""; position: absolute; inset: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='butt' stroke-linejoin='miter'%3E%3Cpath d='M3.5 12.5L12.5 3.5M5.5 3.5h7v7'/%3E%3C/svg%3E") center / 15px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='butt' stroke-linejoin='miter'%3E%3Cpath d='M3.5 12.5L12.5 3.5M5.5 3.5h7v7'/%3E%3C/svg%3E") center / 15px no-repeat; }
  .autres .rangees .projet.en-vue :is(.lien-m-texte, .lien-m-piece) { color: #161510; }
  .autres .rangees .projet.en-vue .lien-m-piece { translate: 3px -3px; }
  .autres .rangees .projet :is(.visuel, .carte-projet) { transition: scale 0.15s cubic-bezier(0.22, 1, 0.36, 1); }
  .autres .rangees .projet:active :is(.visuel, .carte-projet) { scale: 0.985; }
}
@media (prefers-reduced-motion: reduce) { .autres .rangees .projet .carte-projet .fleche, .autres :is(.lien-m-texte, .lien-m-piece), .autres .rangees .projet :is(.visuel, .carte-projet) { transition: none; } }

@media (max-width: 1100px) {
  .autres .carte-projet { padding: 24px 24px 0; }
  .autres .carte-projet .resultat { margin: 8px -24px 0; padding: 20px 24px; }
}
@media (max-width: 600px) {
  .autres .carte-projet h3 { font-size: 21px; line-height: 1.28; }
  .autres .carte-projet .resultat { flex-direction: column; align-items: flex-start; gap: 10px; }
}