/* « Nos actions » : la ruche d'hexagones de la page d'accueil. Dans un fichier à part parce que
   l'aperçu de la console (Comité › Paramètres du site › Nos actions) la dessine avec la même feuille. */
.ta-widget { width: 100%; padding: 20px 0 80px; }
.ta-grid { display: flex; flex-direction: column; align-items: flex-start; max-width: 650px; margin: 0 auto; }
.ta-row { display: flex; flex-direction: row; gap: 8px; margin-bottom: -46px; }
.ta-row:nth-child(even) { margin-left: 94px; }
.ta-hex-wrap { width: 180px; height: 200px; flex-shrink: 0; cursor: pointer; position: relative; perspective: 900px; }
.ta-flipper { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transition: transform .7s ease; }
.ta-hex-wrap:hover .ta-flipper { transform: rotateY(180deg); }
.ta-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px 24px 24px; box-sizing: border-box; }
.ta-face svg.ta-hex-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; }
.ta-face-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; }
.ta-back { transform: rotateY(180deg); }
.ta-logo { max-width: 100%; max-height: 80px; object-fit: contain; margin-bottom: 8px; display: block; }
.ta-nom { font-size: 13px; font-weight: 700; color: var(--green-deep); margin: 0; line-height: 1.3; }
.ta-back-nom { font-size: 12px; font-weight: 700; color: #fff; margin: 0 0 5px; line-height: 1.3; }
.ta-back-desc { font-size: 11px; color: #fff; line-height: 1.4; margin: 0 0 8px; opacity: .95; }
.ta-back-lien { font-size: 11px; font-weight: 700; background: rgba(255,255,255,.25); padding: 3px 10px; border-radius: 20px; border: 1px solid rgba(255,255,255,.5); color: #fff; text-decoration: none; display: inline-block; }
.ta-vide { font-size: 14px; color: #888; font-style: italic; }

@media (max-width: 680px) {
  .ta-grid { max-width: 374px; }
  .ta-hex-wrap { width: 150px; height: 165px; }
  .ta-row { gap: 6px; margin-bottom: -34px; }
  .ta-row:nth-child(even) { margin-left: 76px; }
  .ta-logo { max-height: 64px; }
  .ta-nom { font-size: 11px; }
  .ta-back-nom { font-size: 10px; }
  .ta-back-desc { font-size: 9px; }
}
@media (max-width: 400px) {
  .ta-grid { max-width: 283px; }
  .ta-hex-wrap { width: 115px; height: 126px; }
  .ta-row { gap: 4px; margin-bottom: -24px; }
  .ta-row:nth-child(even) { margin-left: 60px; }
  .ta-logo { max-height: 42px; }
  .ta-nom { font-size: 8px; }
  .ta-back-desc { display: none; }
  .ta-back-nom { font-size: 8px; }
}