/* Projets : ce qui dit que la carte s'ouvre sur la page projet. On avait fait la remarque à Theo qu'on ne le voyait pas ; la flèche seule, qui respire en haut à droite, ne suffisait pas.
   Sélecteurs préfixés par html : la feuille de la page, chargée après ce fichier, pose la flèche et la carte avec les mêmes sélecteurs.

   Ordinateur : la pièce, VALIDÉE par Theo le 25/09 (« on valide pièce »). La flèche prend place dans la pièce des boutons du site, un carré à filet au seul angle arrondi, en bas à droite,
   comme « Parlons de votre projet » et le bouton LinkedIn des témoignages, immobile (elle y respirait encore jusqu'au 25/09, Theo : « retire l'animation de mouvement de flèche sur ces cards »). Au survol de la rangée, la pièce se remplit de crème, la flèche passe à l'encre
   et l'angle arrondi change de coin, sans fondu (direction d'animation du 16/09). Écartées le même jour : « Libellé » (« Voir le projet » écrit devant la flèche) et « Curseur »
   (une étiquette qui suit la souris), avec le panneau Cmd+G remis pour la comparaison. */
html .projets .carte-projet .fleche { --m-taille: 22px; top: 16px; right: 16px; width: 48px; height: 48px; border: 1px solid rgba(var(--encre-sombre), 0.28); border-radius: 4px 4px 16px 4px; }
html .projets .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); }
html .projets .rangees .projet:is(:hover, .en-vue) .carte-projet .fleche { transform: none; background: var(--on-dark); border-color: var(--on-dark); color: #12110c; border-radius: 16px 4px 4px 4px; }

/* Tablette et téléphone, sans survol : le pied de carte, VALIDÉ par Theo le 25/09 (« on valide pied de carte »). Une ligne « Voir le projet ↗ » ferme la carte sous le résultat,
   séparée par un filet, sans fond : le texte en crème atténué, la flèche fine de la carte à droite. Quand la carte est en vue (.en-vue, posé au défilement par la page sur la rangée
   dont le visuel est au centre de l'écran), le texte et la flèche passent en crème plein et la flèche monte de 3 px ; la carte s'enfonce légèrement sous le doigt le temps de l'appui.
   La pièce du coin disparaît sous 1100 px, la ligne client · secteur garde toute sa largeur. La ligne est écrite dans le HTML de chaque carte (.lien-m, masquée sur ordinateur).
   Le même jour, avant elle (l'historique git les garde) : la pièce qui se remplissait et se dépliait en « Voir le projet », jugée trop lourde (« pas convaincu du fond blanc et taille
   du bouton ») ; la pièce avec le libellé à côté, sans fond, à l'étroit dans le coin (« pas assez de place pour laisser dans le coin ») ; puis six autres placements comparés
   dans Cmd+G et par la clé lienm= (sous le titre, dans le résultat, sur le visuel, flèche au bout de la question, légende de l'image) ; et une bande pleine en pied de carte,
   remplie de crème en vue. Le panneau Cmd+G, remis pour ces comparaisons, repart avec eux. */
.lien-m { display: none; }
@media (max-width: 1100px) {
  html .projets .carte-projet .fleche { display: none; }
  html .projets .lien-m { position: relative; display: flex; align-items: center; justify-content: space-between; margin: -32px -24px 0; padding: 0 24px; height: 52px; border-top: 1px solid var(--filet); pointer-events: none; }
  html .projets .lien-m-texte { font-size: 15px; font-weight: 450; line-height: 1; white-space: nowrap; color: rgba(var(--encre-sombre), 0.8); transition: color 0.3s; }
  html .projets .lien-m-piece { position: relative; flex: none; width: 22px; height: 22px; color: rgba(var(--encre-sombre), 0.8); transition: translate 0.45s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s; }
  html .projets .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; }
  html .projets .rangees .projet.en-vue :is(.lien-m-texte, .lien-m-piece) { color: var(--on-dark); }
  html .projets .rangees .projet.en-vue .lien-m-piece { translate: 3px -3px; }
  html .projets .rangees .projet :is(.visuel, .carte-projet) { transition: scale 0.15s cubic-bezier(0.22, 1, 0.36, 1); }
  html .projets .rangees .projet:active :is(.visuel, .carte-projet) { scale: 0.985; }
}
@media (prefers-reduced-motion: reduce) { html .projets .rangees .projet .carte-projet .fleche, html .projets :is(.lien-m-texte, .lien-m-piece), html .projets .rangees .projet :is(.visuel, .carte-projet) { transition: none; } }